- 父组件向子组件传值
- 子组件中，默认无法访问到父组件中的data上的数据和methods中的方法
- 父组件可以在引用子组件的时候，通过属性绑定 (v-bind:)的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部供子组件使用
- 把父组件传递过来的parentmsg属性，先在props数组中，定义一下，这样才能在子组件中使用这个数据
- 组件中的所有Props中的数据，都是通过父组件传递给子组件的
- 子组件中的data数据，不是通过父组件中传递过来的，而是子组件自身私有的，比如子组件通过Api接口请求回来的数据，都可以放到data身上
- 子组件中的data数据是可读可写的，而props中的数据是只读的。（可以修改，但是不推荐修改）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父组件向子组件传值</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <!-- 注意这里的变量名称parentmsg大小写不区分，props里统一使用小写 --> <mycom1 v-bind:parentmsg="msg"></mycom1> </div> <template id="com1"> <div> <h3> 我是子组件 </h3> <h2>从父组件获取到的数据 {{ parentmsg }}</h2> <h2>从子组件获取到的数据 {{ name }} : {{ childmsg }}</h2> </div> </template> <script> var vm = new Vue({ el: '#app', data: { msg: '我是父组件的数据' }, components: { mycom1: { template: '#com1', data: function(){ return { name: "zhangsan", childmsg: "nihao" } }, props: ['parentmsg'] //子组件模板中引用的从父组件里获取的变量，必须在props数组中定义变量名称 } } }) </script> </body> </html> - 父组件把方法传递给子组件
- 父组件向子组件传递方法，使用的是事件绑定机制：v-on:或者@。当我们自定义了一个事件属性之后，子组件就能够通过某些方式来调用传递进去的这个方法了
- 当点击子组件的按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法？使用this.$emit('func')。如果有参数，直接拼接在触发方法后，如：this.$emit('func', arg1, arg2...)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父组件向子组件传值</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <mycom1 v-on:childshow="show"></mycom1> </div> <template id="com1"> <div> <input type="button" value="调用父组件的方法" @click="myclick"> </div> </template> <script> var vm = new Vue({ el: '#app', data: { msg: '我是父组件的数据' }, methods:{ show(){ console.log("我是父组件中的方法") } }, components: { mycom1: { template: '#com1', methods:{ myclick(){ this.$emit('childshow') } } } } }) </script> </body> </html> - 使用ref获取DOM元素和组件的引用
- ref 是英文单词refrence的缩写
- 在元素上添加ref属性， 譬如：ref="myh3"
- 在VM中使用DOM：this.$refs.myh3.innerText
- 同样也可以将ref属性放到component组件元素上，这样就可以直接调用组件的方法和属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用refer获取dom</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <input type="button" value="点击获取文本" @click="show_log"> <h3 ref="myh3">我是一个普通文本</h3> </div> <script> var vm = new Vue({ el :"#app", methods:{ show_log(){ console.log(this.$refs.myh3.innerText) } } }) </script> </body> </html>
网友评论