父组件向子组件传值
使用prop实现父组件上的数据向子组件的传递
1.使用props建立数据通道的渠道
//这是父组件
divid="app"
//这是子组件
childmessage="hello"/child
/div
2.在子组件中通过props传递过来的数据
Vue,component('child',{
props:['message']
})
子组件向父组件传值
('son',{
methods:{
handleClick(){
this.$emit('toFather',123)
}
},
template:`
div
h1这是子组件/h1
button@click="handleClick"
发送给父组件
/button
/div
`
})
2.在父组件中的子标签监听该自定义事件得到传递的值
('parent',{
data:function(){
return{
myValue:''
}
},
methods:{
//得到传到的值
rcvMsg:function(msg){
('接收到数据了'+msg);
=msg;
}
},
template:`
div
h1这是子组件/h1
p
{{'子组件传过来的值'+myValue}}
/p
son@toFather="rcvMsg"/son
/div
`
})
非父子组件传值
有时候两个组件也需要传值(非父子关系),所以我们需要一个公共的vue来进行传递值和获取值
1.创建一个空的vue
//创建一个空的公共的vue对象
varbus=newVue();
2.在组件1中,定义$emit来发送数据
bus.$emit('test','数据')
3.在组件2中使用$on来接收传递的数据
bus.$on('test',function(num){
=num;
//事件的解绑问题
bus.$off("test")
})
当然非父子传值的方法不只有一种我们也可以使用localstorage来传值和取值
//在第一个组件中setItem设置值
('test','数据')
//在第二个组件中getItem获取值
("test");
如果涉及到比较复杂的情况我们就需要专门的状态管理模式vuex这个等以后再给大家做补充
