正规型父子通信：
市面上大部分用的都是这种父子通信的方式，相对简单粗暴型会比较难理解一点。
子组件获取父组件数据：
传值属性名规则：
- 父组件传的属性名最好不要和子组件的属性名一样
- 父组件传的属性名不要出现大写，可以用英文下划线：”_“ 隔开
传值写法：
age属性是固定的值，name是单项数据绑定和父组件的name属性绑定
<dawa age="18" :name="name"></dawa>
获取写法：
在子组件中和data同级写props来获取
props:["age","name"]
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 你好，{{name}} <dawa age="18" :name="name"></dawa> </div> </body> <script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址--> <script> var dawa={ template:` <div> 子组件----{{childName}}--{{age}} <br> <!--在子组件中将获取的属性简单演示一下--> 父组件----{{age}}--{{name}} </div> `, data() { return { childName:"大娃", age:18, } }, props:["age","name"], } let app=new Vue({ el:"#app", data() { return { name:"父类" } }, components:{ dawa }, }) </script> </html>
浏览器结果：
父组件获取子组件数据：
父组件获取子组件数据，采用的是$emit，自定义事件的方式完成的。
父组件获取子组件数据需要做两件事情：
父组件在使用子组件时要给它绑定一个自定义事件
1. <!--@zidingyi是一个自定义事件，此事件会在后面在子组件注册--> 2. <dawa @zidingyi="fuFun" ></dawa>
//父组件里的方法 methods:{ fuFun(val){ // 拿到数据 console.log(val); } }
子组件主动去出发这个事件并传递数据
//点击后给父组件传值 template:` <div> <button @click="butFun">给父组件传值</button> </div> `,
//子组件里的方法 methods:{ butFun(){ // 子组件触发自定义事件zidingyi，同时传递数据 this.$emit('zidingyi','数据1'); } }
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 你好，{{name}} <dawa @zidingyi="fuFun" ></dawa> </div> </body> <script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址--> <script> var dawa={ template:` <div> 子组件----{{childName}}--{{age}} <button @click="butFun">给父组件传值</button> </div> `, data() { return { childName:"大娃", age:18, } }, methods:{ butFun(){ this.$emit('zidingyi',this.childName); } } } let app=new Vue({ el:"#app", data() { return { name:"父类" } }, methods: { fuFun(val){ console.log(val); } }, components:{ dawa }, }) </script> </html>
点击后，父类中的方法执行了，在控制台打印了子类的数据。
浏览器结果：
