Vue学习笔记(九)——sync修饰符

参考文档:https://cn.vuejs.org/v2/guide/

sync修饰符用于简化子组件通知父元素更新传入参数这个动作的代码逻辑,可以参考如下示例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sync修饰符title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
head>
<body>
<div id="app">
    
    <my-com-a :title.sync="title">my-com-a>
    
    

    
    <my-com-b v-bind.sync="obj">my-com-b>
    
    
              
div>
<script>
    Vue.component('my-com-a', {
        template: '
{{title}}
'
, props: ['title'], methods: { changeA: function () { this.$emit("update:title", "it is new title by my-com-a."); } } }); Vue.component('my-com-b', { template: '
{{objkey}}---{{objvalue}}
'
, props: ['objkey', 'objvalue'], methods: { changeB: function () { this.$emit("update:objkey", "it is new key by my-com-b."); } } }); new Vue({ el: '#app', data: { title: "it is title.", obj: { objkey: "it is key.", objvalue: "it is value." }, objkey: "it is key.", objvalue: "it is value.", }, computed: { //如果是计算属性则无效 // obj: function () { // return { // objkey: this.objkey, // objvalue: this.objvalue // } // } } });
script> body> html>

可以看到使用sync修饰符后可以达到相同的效果:
Vue学习笔记(九)——sync修饰符_第1张图片

注意点:

1.子组件通知父元素更新参数时必须带上“update:”,这在简写以后很容易被忽略;

2.当绑定的是对象时,这个对象不能是计算属性(计算属性无效,因为计算属性的依赖信息并没有被修改)。

你可能感兴趣的:(Vue)