子組件sg-component.vue代碼?

<template><div class="sg-component"><button @click="$emit('changeFontSizePx', ++fontSizePx)">增加+</button><button @click="$emit('changeFontSizePx', --fontSizePx)">減少-</button><button @click="$emit('changeFontSizePx', 12)">重置</button><p :style="{ 'font-size': fontSizePx + 'px' }"> 子組件字號：{{ fontSizePx }}px </p></div>
</template>
<script>
export default {props: ["fontSizePx"], //單項綁定(這個fontSizePx叫什么不重要，重要是保持一致，避開關鍵詞，用于接收父組件v-model=后面傳過來的值)model: {prop: "fontSizePx", //雙向綁定(這個fontSizePx叫什么不重要，重要是保持一致，避開關鍵詞，用于接收父組件v-model=后面傳過來的值)event: "changeFontSizePx",},
};
</script>

父組件（引用子組件）代碼

<template><div><sg-component v-model="fontSizePx" /><p :style="{ 'font-size': fontSizePx + 'px' }"> 父組件字號：{{ fontSizePx }}px </p></div>
</template>
<script>
import sgComponent from "@/vue/components/sg-component"; //引入舒工自定義組件
export default {components: { sgComponent },data() {return {fontSizePx: 12, //雙向綁定值};},
};
</script>

渲染效果

注意！在子組件內部不要用v-model綁定modelValue變量，否則會報錯Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "modelValue"?

具體原因參考官方文檔：https://cn.vuejs.org/v2/guide/components-props.html#單向數據流https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

那么如何解決這一“雙重雙向綁定”報錯問題呢？

我們可以在子組件內部引入一個中間變量（子組件內部作用域有效），用$emit()方法來觸發來同步更新子組件內部的中間變量變化值，這樣就可以有效避開“雙重雙向綁定”報錯問題了。

修改后的組件sg-component.vue代碼?

<template><div class="sg-component"><button @click="$emit('changeFontSizePx', ++in_fontSizePx)">增加+</button><button @click="$emit('changeFontSizePx', --in_fontSizePx)">減少-</button><button @click="$emit('changeFontSizePx', (in_fontSizePx = 12))"> 重置 </button><p :style="{ 'font-size': in_fontSizePx + 'px' }"> 子組件字號：{{ in_fontSizePx }}px </p></div>
</template>
<script>
export default {props: ["fontSizePx"], //單項綁定(這個fontSizePx叫什么不重要，重要是保持一致，避開關鍵詞，用于接收父組件v-model=后面傳過來的值)model: {prop: "fontSizePx", //雙向綁定(這個fontSizePx叫什么不重要，重要是保持一致，避開關鍵詞，用于接收父組件v-model=后面傳過來的值)event: "changeFontSizePx",},data() {return {//這里重新命名這個fontSizePx字段，不直接修改fontSizePx就可以解除報錯。in_fontSizePx: this.fontSizePx,};},
};
</script>

這樣就不會報錯了~！

---

擴展閱讀【進階玩法】Angular用emit()實現類似Vue.js的v-model雙向綁定[(ngModel)]功能_你摯愛的強哥?給你發來1條消息?-CSDN博客https://s-z-q.blog.csdn.net/article/details/120600781

總結

以上是生活随笔為你收集整理的【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。