二十、Vue组件化开发-子组件传递数据给父组件

上一篇文章了解了父组件如何向子组件传递数据，那么本篇文章就来详细了解子组件向父组件传递数据的基本使用。

父向子传递数据，为向下传递数据，使用props属性；

子向父传递数据，为向上传递数据 ，使用$emit属性，其用法格式为$emit('自定义事件名',参数)

<div id="app">
    <!-- 子组件 -->
    <child @parent-receive-click="parentReceiveClick"></child>
</div>

<template id="child">
    <div>
        <!--4-->
        <button v-for="item in cates" :key="item.id" @click="clickChildButton(item)">
            {{ item.cate_name }}
        </button>
    </div>
</template>

<script>
    // 2、定义子组件
    const child = {
      template:"#child",
        data () {
          return {
              cates:[
                  {id:1,cate_name:'php'},
                  {id:2,cate_name:'vue'},
                  {id:3,cate_name:'laravel'}
              ]
          }
        },
        methods:{
            // 6、子组件自定义事件
            clickChildButton:function (item) {
                // 子组件通过$emit向父组件发射事件
                this.$emit('parent-receive-click',item);
            }
        }
    };

	// 1、实例化vue
    var app = new Vue({
        el:"#app",
        data:{
        },
        // 3、注册子组件
        components:{
            child
        },
        methods:{
            parentReceiveClick:function(item){
                console.log(item)
            }
        }
    });
</script>

详解Vue子传父数据

1）实例化vue

2）定义子组件模板child，data属性中写入数据，并在子组件模板中渲染输出<button v-for="item in cates" :key="item.id"></button>

3）vue实例中注册子组件

4）渲染输出子组件。<child></child>

5）子组件渲染列表中绑定点击事件<button @click="clickChildButton(item)"></button>

6）子组件methods中绑定事件，并向父组件发送事件

// child子组件中的方法
methods:{
    // 子组件自定义事件
    clickChildButton:function (item) {
        // 子组件通过$emit向父组件发射事件
        this.$emit('parent-receive-click',item);
    }
}

7）父实例模板中监听子组件发送的自定义事件<child @parent-receive-click="parentReceiveClick"></child>

8）父组件（也就是vue实例）中，绑定监听的方法

// vue实例中的方法，也就是父组件
methods:{
    parentReceiveClick:function(item){
        console.log(item)
    }
}

到此，子组件向父组件传递数据完成。

2020-12-05