vue中组件的嵌套数值传递一直不是很清晰，今天理清下思路。
1、在页面中有一个父组件的模板。
从父传给子的数值：我是父亲
我是子组件
<template>//父组件 <div> <div> <son :fatherdata="name" @getdata="getdataval"></son> //子组件 //1.1 //2.2
{{sondata}} //2.4 </div> </div> </template> <script> import son from './Son.vue' //引入子组件
export default{
data(){
return(){
name:'我是父亲',
sondata:'' //2.4
}
},
components:{ //引入子组件
son
},
methods:{
getdataval(data){ //2.3
this.sondata=data //2.4
}
}
} </script>
新起一个页面Son.vue
<template>//子组件 <div> <div> <h1>从父传给子的数值：{{fatherdata}}</h1> //1.3
<button @click="send">将数据传递给父</button> //2.1 </div> </div> </template> <script> export default{ data(){ return(){ message：'我是子组件' } },
props:['fatherdata'],//1.2
methods:{
send(){
this.$emit('getdata',this.message) //2.1
}
}
} </script>
1、父组件向子组件传值
1、在子组件的标签里通过v-bind绑定一条属性，属性值为父组件的数据名称。
2、在子组件的模板中利用props属性把已经绑定的属性值写进去。
3、在子组件的template中就可以使用这个数据了。
2、子组件向父组件传值（使用自定义事件）
1、在发数据组件的methods里定义一个方法，方法中使用如下：this.$emit('event',value)。其中event是自定义事件名，value是要传递的数据。
2、在发数据组件的标签里 @自定义事件名称=“函数名” 。
3、在接收组件的methods里，函数名(val){val} 。其中val就是接收的数据了。
4、在接收组件中声明值，就可以正常调用