vue 子组件向父组件通讯

最新推荐文章于 2024-05-16 15:30:16 发布

阿豪boy

最新推荐文章于 2024-05-16 15:30:16 发布

阅读量49

点赞数

文章标签： vue html js sync jquery

本文链接：https://blog.csdn.net/qq_35516360/article/details/122066948

版权

原文链接: vue 子组件向父组件通讯

上一篇: vue v-if,v-show区别

下一篇: 前端的本地存储

父组件中有一个属性money

点击父组件的修改按钮，直接在父组件中修改属性值，此时子组件也会刷新视图

通过点击子组件的按钮，向父组件发送消息，然后父组件再修改属性值，子组件也会刷新，达到通讯的目的

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="vue.js" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <!-- 子组件不能修改父组件传递来的值 -->
        <div>
           fa  money:{{money}}
            <button type="button" @click='money = 111'>修改</button>
        </div>

        <!-- 设置一个事件son_change，提供给子组件,当子组件发生该事件时，调用父组件的chang方法 -->
        <my-component :a='money' @son_change='change'></my-component>

    </div>
</body>

<script type="text/javascript">
    var myComponent = Vue.extend({
        template: '<div> son : a:{{a}} <button   @click="change">修改</button></div>',
        props: {
            a: ''
        },
        methods: {
            change() {
                // 让子组件发生son_change 事件，这样父组件就能监听到该事件的发生，从而调用父组件的方法
                // 可以传递参数
                this.$emit('son_change', 222)
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            money: 1
        },
        methods: {
            change(val) {
                this.money = val
            }
        },
        components: {
            // 将myComponent组件注册到Vue实例下
            'my-component': myComponent
        }
    });
</script>

</html>

由于这种方式比较常用

vue做了封装

<!-- 使用一个sync的关键字使用一个语法糖，可以省略事件-->
<!-- 在子组件中发送update:val事件即可 -->
<my-component :sona.sync='money'></my-component>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="vue.js" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <div>
            money:{{money}}
            <button type="button" @click='money = 111'>修改</button>
        </div>
        <!-- 使用一个sync的关键字使用一个语法糖，可以省略事件-->
        <!-- 在子组件中发送update:val事件即可 -->
        <my-component :sona.sync='money'></my-component>

    </div>
</body>

<script type="text/javascript">
    var myComponent = Vue.extend({
        template: '<div>sona:{{sona}} <button @click="click">修改</button></div>',
        props: ['sona'],
        methods: {
            click() {
                this.$emit("update:sona", 222)
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            money: 1
        },

        components: {
            // 将myComponent组件注册到Vue实例下
            'my-component': myComponent
        }

    });
</script>

</html>