Vue中组件之间的通信
Posted hyh888
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中组件之间的通信相关的知识，希望对你有一定的参考价值。
组件
全局自定义组件 在任何一个实例中都可以使用
局部自定义组件 只能在当前的实例中使用
1.一个组件里面只能对应一个根标签
2.组件里面的内容写成返回值的形式
<div id="app">
{{ msg }}
<hr>
组件的使用，就相当于自定义的标签，组件的名称就可以当成一个自定义的标签
<li-component></li-component>
<demo-component></demo-component>
</div>
全局的组件
Vue.component(‘test-component‘,{ //组件的信息
data(){
return {
msg : "test"
}
},
methods : {
},
template : `
<div>
<div>全局</div>
<p>组件</p>
<h1> {{ msg }}</h1>
<li-component></li-component>
</div>
`
})
Vue.component("li-component",{
template : "<li>test - li - 01</i>"
)}
new Vue({
el : "#app",
data : {
msg : ‘hello world‘
},
components : {
‘demo-component‘ : {
template : `<div>
<h1>这是一个局部的组件</h1>
<test-component></test-component>
<li-component></li-component>
</div>`
}
}
})
组件之间的传值-父传值，子传父，兄弟互传
父传子
<div id="app">
{{ msg }}
<hr>
<h1>父组件</h1>
<father-component></father-component>
</div>
<script>
// 定义一个父组件
Vue.component(‘father-component‘,{
data(){
return {
fValue : ""
}
},
template : `
<div>
<input type="text" v-model="fValue">
<br>
{{ fValue }}
<hr>
<h4>子组件</h4>
<son-component v-bind:toSon="fValue" :abc="123"></son-component>
</div>
`
})
// 定义一个子组件
Vue.component(‘son-component‘,{
props : [‘toSon‘,"abc"],
template : `
<div>
接收到的内容为 ： {{ toSon }}
<h1>{{abc}}</h1>
</div>
`
})
new Vue({
el : "#app",
data : {
msg : "hello"
}
})
</script>
子传父
<div id="app">
{{ msg }}
<hr>
<father-component></father-component>
</div>
<script>
// 定义一个父组件
Vue.component(‘father-component‘,{
data(){
return {
msg : ""
}
},
methods : {
reMsg : function(data){
console.log(‘接收子组件传递过来的值为：‘ + data)
this.msg = data;
}
},
template : `
<div>
<h1>父组件</h1>
{{ msg }}
<hr>
<h4>子组件</h4>
<son-component v-on:toFather="reMsg"></son-component>
</div>
`
})
// 定义一个子组件
Vue.component(‘son-component‘,{
data(){
return {
abc : 456
}
},
methods: {
handleClick : function(){
this.$emit(‘toFather‘,this.abc)
// this.$emit(‘toFather‘,{"name":"jack","age":18})
},
},
template : `
<div>
<button @click="handleClick">发送内容去父组件</button>
</div>
`
})
new Vue({
el : "#app",
data : {
msg : "hello"
}
})
</script>
组件之间的传值
<div id="app">
{{ msg }}
<hr>
<father-component></father-component>
</div>
<script>
// 定义一个父组件
Vue.component(‘father-component‘,{
data(){
return {
name : "父组件的内容"
}
},
methods : {
checkSon : function(){
console.log(this.$refs);
console.log(this.$refs.mySon.name)
}
},
template : `
<div>
<h1>父组件</h1>
<button @click="checkSon">查看子组件的属性</button>
<hr>
<h4>子组件</h4>
<son-component ref="mySon"></son-component>
</div>
`
})
// 定义一个子组件
Vue.component(‘son-component‘,{
data(){
return {
name : "子组件的内容"
}
},
methods: {
checkParent : function(){
console.log(this.$parent.name)
console.log(this.$parent)
}
},
template : `
<div>
<button @click="checkParent">查看父组件的内容</button>
</div>
`
})
new Vue({
el : "#app",
data : {
msg : "hello"
}
})
</script>
兄弟组件之间传值
<div id="app">
<xiongda></xiongda>
<hr>
<xionger></xionger>
</div>
<script>
// 兄弟组件之间传值必须依靠外界
// 依靠新的一个vue的实例
var bus = new Vue(); //仅仅只是传值用的
// 定义一个兄弟组件
Vue.component(‘xiongda‘,{
template : `
<div>
<h1>熊大</h1>
<button @click="tellXiongEr">通知熊二</button>
</div>
`,
methods : {
tellXiongEr : function(){
bus.$emit(‘toXiongEr‘,‘光头强来了‘)
}
},
created : function(){
bus.$on(‘toXiongDa‘,function(msg){
console.log(‘熊大收到了消息：‘ + msg)
})
},
})
// 定义第二个兄弟组件
Vue.component(‘xionger‘,{
template : `
<div>
<h1>熊二</h1>
<button @click="replyXiongDa">回复熊一</button>
</div>
`,
created : function(){
bus.$on(‘toXiongEr‘,function(msg){
console.log(‘熊二收到了消息：‘ + msg)
})
},
methods : {
replyXiongDa : function(){
bus.$emit(‘toXiongDa‘,‘我知道了‘)
}
}
})
new Vue({
el : "#app",
data : {
msg : "hello"
}
})
</script>
以上是关于Vue中组件之间的通信的主要内容，如果未能解决你的问题，请参考以下文章