【郑州校区】前端笔记Vue项目day3(三） - 黑马程序员技术交流社区

子组件用$emit()触发事件

$emit() 第一个参数为自定义的事件名称第二个参数为需要传递的数据

父组件用v-on 监听子组件的事件

[AppleScript] 纯文本查看 复制代码

<div id="app">

    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>

     <!-- 2 父组件用v-on 监听子组件的事件

                这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数        

        -->        

    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>

  </div>

  <script type="text/javascript" src="js/vue.js"></script>

  <script type="text/javascript">

    /*

      子组件向父组件传值-携带参数

    */

    

    Vue.component('menu-item', {

      props: ['parr'],

      template: `

        <div>

          <ul>

            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>

          </ul>

                        ###  1、子组件用$emit()触发事件

                        ### 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  

          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>

          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>

        </div>

      `

    });

    var vm = new Vue({

      el: '#app',

      data: {

        pmsg: '父组件中内容',

        parr: ['apple','orange','banana'],

        fontSize: 10

      },

      methods: {

        handle: function(val){

          // 扩大字体大小

          this.fontSize += val;

        }

      }

    });

  </script>

兄弟之间的传递

兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
- 提供事件中心 var hub = new Vue()
传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
接收数据方，通过mounted(){} 钩子中触发hub.$on()方法名
销毁事件通过hub.$off()方法名销毁之后无法进行传递数据

[AppleScript] 纯文本查看 复制代码

<div id="app">

    <div>父组件</div>

    <div>

      <button @click='handle'>销毁事件</button>

    </div>

    <test-tom></test-tom>

    <test-jerry></test-jerry>

  </div>

  <script type="text/javascript" src="js/vue.js"></script>

  <script type="text/javascript">

    /*

      兄弟组件之间数据传递

    */

    //1、 提供事件中心

    var hub = new Vue();



    Vue.component('test-tom', {

      data: function(){

        return {

          num: 0

        }

      },

      template: `

        <div>

          <div>TOM:{{num}}</div>

          <div>

            <button @click='handle'>点击</button>

          </div>

        </div>

      `,

      methods: {

        handle: function(){

          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件

          hub.$emit('jerry-event', 2);

        }

      },

      mounted: function() {

       // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on(方法名

        hub.$on('tom-event', (val) => {

          this.num += val;

        });

      }

    });

    Vue.component('test-jerry', {

      data: function(){

        return {

          num: 0

        }

      },

      template: `

        <div>

          <div>JERRY:{{num}}</div>

          <div>

            <button @click='handle'>点击</button>

          </div>

        </div>

      `,

      methods: {

        handle: function(){

          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件

          hub.$emit('tom-event', 1);

        }

      },

      mounted: function() {

        // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名

        hub.$on('jerry-event', (val) => {

          this.num += val;

        });

      }

    });

    var vm = new Vue({

      el: '#app',

      data: {

        

      },

      methods: {

        handle: function(){

          //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  

          hub.$off('tom-event');

          hub.$off('jerry-event');

        }

      }

    });

  </script>