vue 中.sync修饰符的使用方法

Bertha 。 2022-11-15 15:55 198阅读 0赞

最近在项目中看到有些地方用了.sync修饰符，所以进一步了解一下，并记录。  
vue官网.sync修饰符介绍：[点击查看][Link 1]  
一般情况下，子组件向父组件传值并改变值都需要使用回调方法，但有更简洁的写法。  
如下为简易案例：  
常见的**回调函数写法**：

// 子组件代码：
    
    <template>
    	<div>
    		<button @click="setNum">点击传值</button>
    	</div>
    </template>
    <script>
    	data() { 
       		return { 
       			num：20
       		}
       	}
       	methods: { 
    		setNum(){ 
    			this.$emit('getNum',this.num)
    		}
    	}
    </script>

// 父组件代码：
    
    <template>
    	<div>
    		<Children @getNum="getNum"></Children>
    		<text>{ { number}}</text>	
    	</div>
    </template>
    <script>
    	data() { 
       		return { 
       			number：0
       		}
       	}
       	methods: { 
    		getNum(val){ 
    			this.number = val
    		}
    	}
    </script>

点击前后如下  
![在这里插入图片描述][20210402144743394.png]![在这里插入图片描述][20210402144829146.png]  
**使用.sync修饰符写法**

// 子组件代码：
    
    <template>
    	<div>
    		<button @click="setNum">点击传值</button>
    	</div>
    </template>
    <script>
    	data() { 
       		return { 
       			num：20
       		}
       	}
       	methods: { 
    		setNum(){ 
    			this.$emit('updata:sum',this.num)
    		}
    	}
    </script>

// 父组件代码：
    
    <template>
    	<div>
    		<Children :sum.sync="number"></Children>
    		<text>{ { number}}</text>	
    	</div>
    </template>
    <script>
    	data() { 
       		return { 
       			number：0
       		}
       	}
       	methods: { 
    	}
    </script>

点击效果同上。  
**回调函数写法**核心代码：

// 子组件
    this.$emit('getNum',this.num)
    
    // 父组件
    <Children @getNum="getNum"></Children>
    getNum(val){ 
    	this.number = val
    }

**.sync修饰符写法**核心代码：

// 子组件
    this.$emit('updata:sum',this.num)
    
    // 父组件
    <Children :sum.sync="number"></Children>

虽然.sync更加简洁，但使用其他组件时是不受控的，如：input,radio,checkbox等  
以input为例：

// 子组件
    
    <input type="text" v-model="text" />
    <button @click="sumbit">提交</button>
    
    sumbit(){ 
        this.$emit('updata:text',this.text)
        console.log(this.text)	//这里可以正常打印
    }

// 父组件
    
    <Children :text.sync="text"></Children>
    <text>{ { text}}</text>
    
    console.log(this.text)//这里打印为空

[Link 1]: https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
[20210402144743394.png]: https://img-blog.csdnimg.cn/20210402144743394.png
[20210402144829146.png]: /images/20221022/0051786e05234a168de9e16550ae3122.png