Vue的事件发射与监听

$emit()是发射 $on()是监听

<div id='app'>
    <h1 v-html="des"></h1>
    <h3>{
     {
     count}}</h3>
</div>
<button onclick='add()'> add </button>
<button onclick='addOne()'> addOne </button>

    let vm = new Vue({
     
        el:'#app',
        data:{
     
            des:'监听发射自定义事件！！！',
            count:100
        },
        methods:{
     
        }
    })
    vm.$on('biu',function(...data){
         ...是rest函数，就是可以将emit中发送的所有数据都接收到，否则就得一个形参对应一个变量
        console.log( data )
    })
    function add(){
     
        vm.$emit( 'biu', vm.count,vm.des,'凯迪棒棒哒~~~' )
    }
    function addOne(){
     
    }

实际操作：

<div id="app">
    <h2 v-text="des"></h2>
    <h3>{
     {
     VueDat}}</h3>
    <Parent @ashen='lin'></Parent>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    //1.定义实例对象
    new Vue({
     
        el:'#app',
        data(){
     
            return {
     
                des:'子组件传数据给父组件！',
                VueDat:''
            }
        },
        methods:{
     
            //14.通过触发事件来获取到对应的数据；
            lin( xiaofeng ){
     
                this.VueDat = xiaofeng
            }
        },
        //2.定义组件Parent；
        components:{
     
            Parent:{
     
                data(){
     
                    return {
     
                        data1:'这个是父组件数据;',
                        name1:"",
                        data2:'继续要来传的值'
                    }
                },
                //3.定义对应的组件模块【<Child />子组件的挂载】
                //@click='candy'
                //9.@自定义事件名字，后面的candy为保存的数据内容，也就是点击的时候触发candy的方法；
                template:`
                    <div style="font-size:26px;font-weight:bold;">
                        这个是父组件的模块  {
      {
      data1}}
                        {
      {
      name1}}
                        <Child @handleVal='candy'/>
                    </div>
                `,
                methods:{
     
                    //10. candy的data形参为子组件传递过来的值；
                    candy(data){
     
                        //11.数据进行赋值；
                        this.name1 = data
                        console.log( data )
                        //12.继续发送数据【ashen是自定义事件】
                        this.$emit('ashen','我继续要向上来传值啦'+ this.data2 )
                    }
                },
                //4.从父组件中定义子组件
                components:{
     
                    Child:{
     
                        data(){
     
                            return {
     
                                dat:'这个是子组件数据;'
                            }
                        },
                        //5.孙组件的模版 
                        //6.在孙组件中定义点击事件；
                        //你需要来传递哪些值？两个对象->从谁(子)到谁(父)？
                        //$emit('自定义事件','携带数据')
                        //7.点击的时候，发送数据
                        template:`
                            <div style="font-size:26px;font-weight:bold;">
                                这个是子组件的模块  {
      {
      dat}}
                                <button @click='$emit( "handleVal" ,"我是凯迪" )'> 儿子触发事件的按钮 </button>
                            </div>
                        `,
                        methods:{
     
                            add(){
     
                                // alert( 123 )
                                // console.log( this )
                                //自定义事件handleVal
                                //8.把数据发射出去【包涵在方法里面，abc相当于形参，来接收值的】
                                this.$emit( "handleVal", abc )
                            }
                        }
                    }
                }
            }
        }
    })

这里面需要明白的逻辑很多：
首先，Child里面的methods定义的add成为了我起初最大的困扰点，其实这个add方法是不需要实现的，而是作为this.$emit()的载体，不需要绑定点击事件具体实现，abc是“我是凯迪”的形参，handleVal是自定义的属性；
紧接着开始在父元素里面实现传值，在《父子组件通讯传值》笔记里我说过，子元素自定义的标签是给父元素用的，所以在Parent里面出现了：

用v-on：(@)绑定了handleVal为candy方法，请注意用@绑定的这个属性是和子级定义的自定义属性一摸一样，这个candy和add不同，candy是具体实现的方法，而add不需要实现，只是载体；candy方法的形参其实是和形参abc一样，都是接收“我是凯迪”这个实参，因为；
在candy出现了emit（ashen，省略。。。），这个也是在像自己的父元素大Vue传值的过程，类比以上过程