官方文檔

父組件代碼

<template><div><input type="button" value="我是父組件的按鈕" @click="show" /><!-- 在需要子組件修改的數(shù)據(jù)后加上.sync即可 --><child :isShow.sync='isShow' v-show="isShow" /></div> </template> <script> import child from './child' export default {components:{child},data () {return {isShow: false}},methods: {show() {this.isShow = true},} } </script>

子組件代碼塊

<template><div>我是一個子組件<button @click="childisShow">點我隱身</button></div> </template> <script> export default {methods: {childisShow() {//當子組件需要修改父組件的值時，需要顯示觸發(fā)更新事件// this.$emit('update:XXXX','內(nèi)容')this.$emit('update:isShow',false)}} } </script>

總結(jié)

以上是生活随笔為你收集整理的使用vue的sync修饰符进行子父组件的数据绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。