子父组件通讯

た入场券 2023-06-07 12:09 10阅读 0赞

## 为什么要进行组件通信？ ##

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

下面看一下案例：

//自我案例
    <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'
    })