Vue-组件6 子组件给父组件传值

最新推荐文章于 2023-03-29 17:08:47 发布

原创最新推荐文章于 2023-03-29 17:08:47 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍Vue中子组件如何通过自定义事件向父组件传递数据，包括原理、注意事项及代码示例。

Vue-组件6 子组件给父组件传值

一、实质

父组件中定义了一个方法，该方法用来修改父组件中的数据
通过自定义事件绑定的方式给子组件传递父组件中的方法
子组件通过this.$emit(‘方法名’, [参数1], [参数2], …)的方式调用传递过来的方法

这样就实现了子组件给父组件传值

二、注意

父组件给子组件传递函数时，传递的是函数名，若加上括号，则是先运行该方法，然后再将该方法的返回结果绑定给事件
给子组件绑定自定义事件时，该自定义事件的名称，为子组件将访问的方法名

三、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>父组件的值---msg={{msg}}</h1>
<!--        4.父组件通过事件绑定的方式，将getChildData传递给子组件，事件名称即子组件将来要调用的方法名-->
<!--        注意：传递方法时不能有(),只传递方法名-->
        <child-Com @func="getChildData"></child-Com>
    </div>

<!--    1.创建子组件模板-->
    <template id="childTemp">
        <div>
            <h1>子组件</h1>
<!--            5.在子组件中绑定一个点击事件，没点击一次，就调用父组件传递过来的方法-->
            <button @click="fnClick">给父组件传值</button>
        </div>
    </template>
<script>
    // 2.创建子组件
    Vue.component('childCom', {
        template: '#childTemp',
        methods: {
            fnClick() { // 6.定义子组件中【给父组件传值】按钮点击事件的方法
                // 7.在该方法中调用父组件传递过来的方法，通过 this.$emit('方法名', [参数1], [参数2], ...)的方式调用，方法名即为父组件中绑定的自定义事件名，为字符串形式
                this.$emit('func', '子组件的值')
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '父组件的值'
        },
        methods: {  // 3.创建一个父组件的方法，该方法将用来传递给子组件，让子组件调用该方法
            getChildData(data) {
                this.msg = data
            }
        }
    })
</script>
</body>
</html>

更新时间：2019-12-21