2.组件间通讯

文章目录

组件间传值

---

 

组件间传值

（index.vue父组件；test.vue子组件）

一、父组件给子组件传值

1.在index父组件中定义和发送（进行数据绑定）

<test :title="title"></test>//发送到子组件

export default {
        data() {
            return {
                title: 'Hello',
            }
        },

2.在test子组件中进行声明接收并且显示到页面上

<view>这是父组件给子组件传递过来的数据->{{title}}</view>

props:['title'],/* props来接收 */

二、子组件给父组件传值

1.点击按钮进行发送数据传递到父组件

<button type="primary" @click="toFather">给父组件传值</button>

export default {
        data() {
            return {
                num:3,
            }
        },

methods:{
        toFather(){
            console.log('子组件给父组件传值')
            this.$emit('myEvent',this.num)//语法：$emit('传递到父组件的事件'，需要传递的数据)
        }
    },

2.父组件的接收

<test v-if="flag" :title="title" @myEvent="childTofather"></test>

<view>{{num}}</view>//显示

export default {
        data() {
            return {
                num: null//初始化一个接收的数据
            }
        },

methods: {
            childTofather(num){
                console.log("子组件传父组件，使用&emit('父事件')，要传的值",num);
                this.num=num
            }
        },

三、兄弟组件之间的传值

a.vue

需求：在A组件中点击按钮修改B组件的值

这是A组件：<button @click="addNum" type="primary">点击修改B组件的数据</button>

methods: {
            addNum(){
                // 全局使用uni，语法：传的事件+需要传的数据
            uni.$emit('updateNum',10)
            }
        }

b.vue

<view>这是B组件的数据：{{num}}</view>

export default {

        data() {
            return {
                num: 0
            }
        },

// 在实例创建完成之后被立即调用
        // 全局的声明
        created() {

//传过来的函数+回调函数
            uni.$on('updateNum',num=>{
                this.num+=num
            })
        },

1.父组件给子组件传值

2.子组件给父组件传值

3.兄弟组件之间的传值

.