子父组件通讯

最新推荐文章于 2024-08-09 16:07:33 发布

谢小妞

最新推荐文章于 2024-08-09 16:07:33 发布

阅读量154

点赞数

文章标签：子父组件通讯

本文链接：https://blog.csdn.net/weixin_45663264/article/details/102557455

版权

为什么要进行组件通信？

组件是一个聚合体，将来项目要合并，那么必然各个组件之间需要建立联系，这个联系就是数据通信

下面看一下案例：

//自我案例
<body>
    <div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <div>
            <h3 @click="open"> 这里是父组件 </h3>
            <p> 我先在有： {{ xiaojinku }} </p>
            <!-- 这个的@后的事件名称可以任意  @后的就是自定义事件， =后的就是事件处理程序 -->
            <Son @songet = "fatherget"  :c="d"></Son>
        </div>
    </template>

    <template id="son">
        <div>
            <h4> 这里是Son 组件</h4>
            <button @click = "give"> 给红包 </button>
        </div>
    </template>
</body>
<script src="../../lib/vue.js"></script>
<script>
    // 子父组件通信是通过自定义事件实现的  

    Vue.component('Father', {
        data() {
            return {
                xiaojinku: 0,
                b: 777,
                d: false
            }
        },
        template: '#father',
        methods: {
            fatherget(val, num) {
                console.log(val, num)
                this.xiaojinku = val
            },
            open() {
                this.d = true;
            }
        }
    })

    Vue.component('Son', {
        template: '#son',
        props: ["c"],
        // props: {
        //     a: {
        //         type: Number,
        //         default: () => {
        //             return 1
        //         },
        //         require: true
        //     }
        // },
        data() {
            return {
                hongbao: 1000
            }
        },
        methods: {
            give() {
                // this.$emit('get',参数)
                this.$emit('songet', this.hongbao, 12)
            }
        },
        mounted() {
            console.log(this.$props)
            console.log(this.a, this.c)
        }
    })

    var vm = new Vue({
            el: '#app'
                // components:{
                //     son,
                //     father,
                // }
        })
        // console.log(vm)
</script>

是通过自定义事件

事件的发布
通过绑定元素身上实现
事件的订阅

通过this.$emit触发 // html

<Father></Father>
</div>

<div>
  <h3> 这里是son </h3>
  <button @click = "giveHongbao"> 给父亲红包 </button>
</div>
</template> //js Vue.component('Father',{

template: '#father',
data ( ) {
  return {
    gk: 0
  }
},
methods: {
  fn ( val ) {
    this.gk = val 
  }
}
})

Vue.component('Son',{

template: '#son',
data () {
  return {
    money: 5000
  }
},
methods: {
  giveHongbao () {
    this.$emit('give',this.money)
  }
}
}) new Vue({

el: '#app'
})