vue的组件传值
vue的强大之处在于他的组件化，component，在页面由多个组件组成的情况下，组件间传值会变得稍微复杂点，这篇文章会根据vue组件间如何传值来做一些解说。
一般来说页面中的组件间关系有：父子组件和兄弟组件，传值方式分为（1）父传子（2）子传父（3）兄弟互传
1、父组件传值给子组件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="example">
{{msg}}
<father-component></father-component>
</div>
<script>
Vue.component('father-component', {
data: function () {
return {
myValue: ''
}
},
template: `<div>
<input type="text" v-model="myValue" v-bind:data-msg="myValue"/>
<hr/>
<son-component v-bind:msg="myValue">
</son-component>
</div>
`
});
Vue.component('son-component', {
props: ['msg'],
template: `<p>{{"接收到的参数为----"+msg}}</p>`
});
new Vue({
el: '#example',
data: {
msg: 'hello world'
}
})
</script>
</body>
</html>上面代码中我写了个嵌套组件，一个为父，一个为子，名字分别为father-component和son-component，我们要记住，在父传子的过程中我们在子组件标签上使用属性传值，到了子组件实例中用props属性来接受值，上面代码我在
<son-component v-bind:msg="myValue"></son-component>
给子组件传了个msg的数据，数据值myValue在父组件中会变化子组件通过props以数组形式接受到后可以直接在template中使用msg
2、子组件向上传值给父组件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="el">
<!-- 调用父组件-->
<father-component></father-component>
</div>
<script>
//创建一个父组件
Vue.component('father-component', {
methods: {
//这个参数就是子组件传来的值
recvMsg: function (sonmsg) {
console.log(
'接受到子组件传来的值---' + sonmsg);
this.msg = sonmsg
}
},
data() {
return {
msg: '等待传值'
}
},
template: `<div>
<h1>this is father component：{{msg}}</h1>
<hr/>
<son-component v-on:toFather="recvMsg">
</son-component>
</div>`
});
//创建一个子组件
Vue.component('son-component', {
methods: {
handleClick: function () {
//触发事件,并传值,toFather是父组件的一个事件，第二个参数是传过去的值
this.$emit('toFather', '今天很开心，学会了组件传值');
}
},
template: `<div>
<h1>this is son component</h1>
<button @click="handleClick">
向父组件通过事件传值
</button>
</div>
`
});
new Vue({
el: '#el',
data: {
msg: 'hello world'
}
})
</script>
</body>
</html>在子组件向父组件传值过程中，稍微复杂一点，子组件需要触发一个事件，并将值传过去，父组件要绑定一个事件来接受子组件的值。如上述代码，子组件在handleClick中通过$emit确定父组件的触发事件toFather和传过去的值，子组件上面写上要绑定的父组件的触发事件名字recvMsg，父组件中自定义了一个事件recvMsg，在methods中获取了传过来的值。记住$emit关键方法。
3、兄弟组件间的传值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="example">
<xiong-da></xiong-da>
<hr/>
<xiong-er></xiong-er>
</div>
<script>
//兄弟通信采用的技术方案，就是事件的绑定和触发
// 触发:this.$emit()
// 绑定:this.$on();
//创建一个vue的实例，借助该实例完成事件的绑定和触发
var bus = new Vue();
//熊大告诉熊二：光头强来了
//熊二给熊大回复消息：知道了
Vue.component('xiong-da', {
created: function () {
//绑定事件
bus.$on('toXiongDa', function (msg) {
console.log('熊大接收到的消息为:' + msg);
})
},
methods: {
tellXiongEr: function () {
//触发自定义事件并传值
bus.$emit('toXiongEr', '光头强来了');
}
},
template: `
<div>
<h1>这是熊大</h1>
<button @click="tellXiongEr">
通知熊二
</button>
</div>
`
});
Vue.component('xiong-er', {
created: function () {
//完成事件的绑定
bus.$on('toXiongEr', function (msg) {
console.log('熊二接收到消息了:' + msg);
})
},
methods: {
replyToXiongDa: function () {
//触发自定义事件
bus.$emit('toXiongDa', '熊二知道了');
}
},
template: `
<div>
<h1>这是熊二</h1>
<button @click="replyToXiongDa">
回复熊大
</button>
</div>
`
});
new Vue({
el: '#example',
data: {
msg: 'hello world'
}
})
</script>
</body>
</html>兄弟间传值需要用到bus事件车，确定触发事件并传值使用$emit,绑定事件得值使用$on，借助新的vue实例完成数据传递。
如果帮到你请点个赞。