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

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

Leisure Tea

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

阅读量118

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/SevenSongyun/article/details/103648847

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

Leisure Tea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-组件6 子组件给父组件传值

Vue-组件61 子组件给父组件传值一、实质父组件中定义了一个方法，该方法用来修改父组件中的数据通过自定义事件绑定的方式给子组件传递父组件中的方法子组件通过this.$emit(‘方法名’, [参数1], [参数2], …)的方式调用传递过来的方法这样就实现了子组件给父组件传值二、注意父组件给子组件传递函数时，传递的是函数名，若加上括号，则是先运行该方法，然后再将该方法的返...
复制链接

扫一扫

专栏目录