Vue通信组件之四：子组件向父组件传值

1、自定义事件 

     当子组件需要向父组件传递数据时，就要用到自定义事件。Vue的子组件用$emit()来触发事件，父组件用$on()来监听子组件的事件。父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。

使用要求：在子组件中通过$emit()把值传递给父组件，父组件使用v-on:xxx(或者使用语法糖@xxx)；但是需要注意$emit()第一个参数是自定义事件的名称。

子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用 。

<div id="app">
   <p>总数：{{total}} </p>
   <my-component  @increase=”handleGetTotal” @reduce= ”handleGetTotal”></my-component>
</div>
<script>
Vue.component('my-component' {
     template:`\
          <div >\
          <button @cl 工ck＝ ” handle Increase” > + l </button > \
          <button @click= ” handleReduce ” >- 1 < /button> \
          </div> `,
    data:function () {
            return {
                counter : 0
        },
    methods:{
        handleincrease: function () {
            this.counter++;
            this.$emit ('increase', this.counter);
       },
    handleReduce: function () {
            this.counter--;
            this.$emit('reduce'， this.counter);
		}

});
var app =new Vue({
    el :’ #app ’,
    data: {
       total: 0
	}
    methods : {
        handleGetTotal: function (total) {
        this.total = total ;
    })
</script>

 

2、使用v-model

在父组件上使用v-model指令，子组件使用this.$emit('input',this.子组件属性)

      尽管Vue允许子组件去修改父组件数据，但在业务中，子组件应该尽量避免依赖父组件的数据，更不应该去主动修改它的数据，因为这样使得父子组件紧耦合，只看父组件，很难理解父组件的状态，因为它可能被任意组件修改，理想情况下，只有组件自己能修改它的状态。父子组件最好还是通过props和$emit来通信。

3、应用功说明

          原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
          父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称。

<son @func="getMsg"></son>

子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用。
 

<div id="app">
    <!-- 引用父组件 -->
    <son @func="getMsg"></son>

    <!-- 组件模板定义 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父组件传值" @click="sendMsg" />
      </div>
    </script>
  </div>

  <script>
    // 子组件的定义方式
    Vue.component('son', {
      template: '#son', // 组件模板Id
      methods: {
        sendMsg() { // 按钮的点击事件
          this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
        }
      }
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
          alert(val);
        }
      }
    });
  </script>