sync修饰符-子组件修改父组件属性

简介: sync修饰符-子组件修改父组件属性

🏆 文章目标:记录前端开发中遇见的问题。

🍀 sync修饰符-子组件修改父组件属性

✅ 创作者:Jay…

🎉 个人主页:Jay的个人主页

🍁 展望:若本篇讲解内容帮助到您,请帮忙点个赞吧,您的支持是我继续写作的最大动力,谢谢。🙏

.sync修饰符

.sync是一个语法糖。是父组件监听子组件更新某个props的请求的缩写语法。

  • Vue规则:组件不能修改props外部数据
  • Vue规则:$emit可以触发事件并传参
  • Vue规则:$event可以获取$emit的参数

以上三条规则,都是Vue作者-尤雨溪定的

场景

Vue规则:组件不能修改props外部数据

Vue中的 props 是单向向下绑定的。

即:每次父组件更新时,子组件中的所有 props 都会刷新为最新的值。但是如果在子组件中修改 props ,Vue会向你发出一个警告。(无法通过修改子组件的props来更改父组件。)

使用$emit触发父组件的属性更新。

由于无法通过修改子组件的props来更改父组件,所以我们在父组件使用子组件的标签上声明一个监听事件。在子组件想要修改时使用$emit触发事件并传入新的值,让父组件进行修改。

案例

案例1

介绍

使用.sync修饰符来修改父组件的属性。

即按钮提交前,父组件的提交信息为“Jay正在处理中”,提交后,子组件修改提交信息为“提交成功”

主要代码

父组件引用子组件

<child :button-name="name" :commit-message.sync="message"></child>

子组件修改父组件的参数

this.$emit('update:commitMessage', 'Jay提交成功');

效果

源码

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>sync修饰符-子组件修改父组件</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="parent">
        <p>{{message}}</p>
        <child :button-name="name" :commit-message.sync="message"></child>
    </div>
    <script>
        /**
         * 子组件
         */
        Vue.component('child', {
            props: ['buttonName', "commitMessage"],
            template: '<button @click="commit">{{buttonName}}</button>',
            methods: {
                /**
                 * 提交
                 */
                commit: function () {
                    this.$emit('update:commitMessage', 'Jay提交成功');
                }
            }
        })
        /**
         * 父组件
         */
        new Vue({
            el: '#parent',
            data: {
                name: '提交',
                age: '',
                message: 'Jay正在处理中'
            }
        })
    </script>
</body>
</html>

案例2

介绍

sync在2.3版本引入,在该版本之前,主要方案时,父组件需要传一个绑定值(myMessage)同时需要设置一个更新触发函数(updateMessage)给子组件修改绑定值的时候调用。

源码

相对比较简单,需要参考源码进行理解。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>sync修饰符-子组件修改父组件</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="parent">
        <p>{{message}}</p>
        <child :button-name="name" @update:commit-message="updateMessage"></child>
    </div>
    <script>
        /**
         * 子组件
         */
        Vue.component('child', {
            props: ['buttonName', "commitMessage"],
            template: '<button @click="commit">{{buttonName}}</button>',
            methods: {
                /**
                 * 提交
                 */
                commit: function () {
                    this.$emit('update:commit-message', 'Jay提交成功');
                }
            }
        })
        /**
         * 父组件
         */
        new Vue({
            el: '#parent',
            data: {
                name: '提交',
                age: '',
                message: 'Jay正在处理中'
            },
            methods: {
                updateMessage: function (val) {
                    this.message = val
                }
            }
        })
    </script>
</body>
</html>

关注公众号:熊猫Jay字节之旅,了解更多 AI 技巧 ~


相关文章
|
6月前
有关子组件修改父组件传值报错问题
有关子组件修改父组件传值报错问题
42 0
|
4月前
|
前端开发
forwardRef的简单使用:用于解决父组件传递ref给子组件的问题
forwardRef的简单使用:用于解决父组件传递ref给子组件的问题
182 2
|
2月前
|
存储 JSON JavaScript
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
详细介绍了微信小程序中组件的创建、引用(包括局部引用和全局引用)、样式隔离、组件的data、methods和properties,以及组件的数据监听器的使用方法和场景。
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
|
6月前
|
JavaScript
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
33 2
|
6月前
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
6月前
|
JavaScript
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
|
6月前
|
小程序
子组件调用父组件的方法并传递数据
子组件调用父组件的方法并传递数据
|
存储 JavaScript
如何使用 ref 属性获取子组件实例对象?
如何使用 ref 属性获取子组件实例对象?
144 0
|
JavaScript
Vue 在父(子)组件引用其子(父)组件方法和属性
Vue 在父(子)组件引用其子(父)组件方法和属性
238 0