乐趣区

关于vue.js:组件-对props双向绑定sync修饰符

子组件代码

父组件代码

大多数状况下,父组件通过 v -bind(:)的形式批改子组件的 props 对象中的属性来达到父改子的目标;
反过来,子改父则通过语法糖: .sync 修饰符的形式批改,代码例子如上述

.sync 修饰符(用于子组件批改父组件)
是 @update:changeTitle=”obj.title = $event” 语法糖,其原理就是将 event 对象传入到子组件

如何实现:
1)子组件首先定义个 props 属性:
props: {

title: {
  type: String,
  default: "",
},

},
其次定义一个 emit:
this.$emit(“update:changeTitle”, newTitle);

2)父组件如果实现双向绑定,则须要:
1.v-bind 作为单向子组件批改其属性,这里不做具体代码阐明,用的太熟了
2. 应用语法糖作为子组件批改父组件其属性:
:title=”obj.title” // props,父组件批改子组件
:changeTitle.sync=”obj.title” // 通过点击子组件的办法,批改父组件

2)场景二,子向父单向批改
子组件代码:

父组件代码:
当点击按钮后,这里的 msg 属性值会产生扭转

能够试想下子改父的需要场景,
大略逻辑就是这样,具体用法的看业务需要。。。

退出移动版