本文介绍Vue.js中不同组件之间的通信方式，包括父子组件通过属性和事件进行数据传递，以及子组件如何向父组件发送信息。此外，还提到了使用Vuex进行平级组件间的数据共享。
1.父->子
父<template>
<div>
'我是父组件，我显示的内容是'{{mes}}
<Cc :from-p='mes'></Cc>
</div>
</template>
<script>
import Cc from './Cc.vue'
export default {
data(){
return {
mes:'我是父组件的内容'
}
},
components:{
Cc
}
}
</script>
子<template>
<div>
'我是子组件，我显示的内容是'{{mes}}
</div>
</template>
<script>
export default {
props:['fromP'],
data(){
return{
mes:this.fromP
}
}
}
</script>
2. 子->父
父<template>
<div>
'我是父组件，我显示的内容是'{{mes}}
<Cc @fromCc='chan'></Cc>
</div>
</template>
<script>
import Cc from './Cc.vue'
export default {
data() {
return {
mes: ''
}
},
methods: {
chan(da) {
this.mes = da;
}
},
components: {
Cc
}
}
</script>
子<template>
<div>
'我是子组件，我显示的内容是'{{mes}}
<button @click='toP'>虽然不允许，但是我想传给父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
mes: '我是子组件的内容'
}
},
methods:{
toP(){
this.$emit('fromCc',this.mes)
}
}
}
</script>
3.平级传递vuex哈哈
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
