实现思想:
利用每个组件的属性来传值,即每个组件都有Children等属性,根据这些属性找到要找的组件,对其进行操作,
比如Vue实例vm的父级没有,子组件在这里有App和App下的Son,这些都是vm的属性中报错,换句话说vm下面的每一行代码都能在vm的某个属性中找到,对其进行更改,
便可达到从父组件向子组件传值的效果,换言之,从子组件向父组件‘传值’也可以这样。
理论上来说这种方式可以实现任意组件之间‘传值’,只要通过某种关系找到某组件,就可以对其进行任何操作,包括传值
let Son = {
template:`<div>
{{ name }} {{ position }}<button @click="ChangeName">Change Parent Name</button>
</div>`,
data(){
return{
name:'Son',
position:'son'
}
},
methods:{
ChangeName(){
this.$parent.name = 'Have Change';//设置父级的name为xxx
}
}
};
let App = {
template: `<div id="app">
{{ name }}
{{ position }}
<button @click="send">Pass Value</button>
<hr><Son/>
</div>`,
data(){
return{
name:"App",
age:21,
position:'parent',
message:'From App'
}
},
components:{
Son
},
methods:{
send(){
this.$children[0].name = "change";//设置它的第一个子元素,即子组件的name为 xxx
}
}
};