在Vue.js的組件中，prop是“單向綁定”的，數據只能從父組件傳輸到子組件。Vue文檔中的說了這樣做的原因：

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態，從而導致你的應用的數據流向難以理解。

用自定義事件向父組件發送數據

但是有時候的確需要由子組件從父組件獲取更新的數據，這時候一個相對簡單的方法就是——自定義事件。父組件監聽事件，在事件的回調函數中得到數據。子組件emit事件，同時發送數據。

父組件

<template><div id="app"><HelloWorld @click="clickData" /><div> {{abc}} </div></div> </template><script> import HelloWorld from "./components/HelloWorld.vue"; export default {name: "App",components: {HelloWorld,},data() {return {abc: 123}},methods: {clickData (value) {this.abc = value}}, }; </script>

子組件

<template><div class="hello"><button @click="clickadd">按下</button></div> </template><script> export default {name: 'HelloWorld',methods: {clickadd () {this.$emit('click', '456')}} } </script>

按下按鈕前：

按下按鈕后：

123和456表示的是父組件中變量abc的值，子組件按下按鈕時，調用了this.$emit，第一個參數表示時間名，第二個參數就可以傳遞想要發送到父組件的數據了。

父組件這邊則在子組件的html標簽上監聽同名的事件（@click="clickData"），編寫回調函數接收值并賦值給變量abc。

用自定義事件實現子組件prop雙向綁定

更進一步，如果我們想改變傳輸到子組件的prop所綁定的父組件的變量，我們可以這樣寫：

父組件

<template><div id="app"><HelloWorld :msg="abc" @update:msg="clickprop"/><div> {{ abc }} </div></div> </template><script> import HelloWorld from "./components/HelloWorld.vue"; export default {name: "App",components: {HelloWorld,},data() {return {abc: "123",};},methods: {clickprop(value) {this.abc = value}}, }; </script>

子組件

<template><div class="hello"><div id="demo" @click="clickadd">{{ msg }}</div></div> </template><script> export default {name: 'HelloWorld',inhertAttrs: true,props: {msg: {type: String,}},data: function() {return {}},methods: {clickadd () {this.$emit('update:msg', '456')}} } </script>

這樣子組件和父組件的值會同時變化。按下上面的123之前：

按下上面的123之后：

值456首先通過emit傳遞到了父組件，再被賦值給了父組件變量abc，再通過子組件綁定的prop傳遞回父組件，最終同時變化成功。這樣也算實現了“雙向綁定”。

使用.sync修飾符簡化雙向綁定代碼

代碼中的事件名“update:msg”僅僅是一個名字而已，不和prop名相同也可以。但是如果我們保持與prop名相同，Vue為上面的代碼提供了一個簡寫的形式：使用.sync操作符。使用它，事件名固定為了“update:prop名”的形式，我們也不需要自己寫回調函數和綁定事件的代碼了。

父組件

<template><div id="app"><HelloWorld :msg.sync="abc" /><div> {{ abc }} </div></div> </template><script> import HelloWorld from "./components/HelloWorld.vue"; export default {name: "App",components: {HelloWorld,},data() {return {abc: "123",};},methods: {}, }; </script>

子組件

<template><div class="hello"><div id="demo" @click="clickadd">{{ msg }}</div></div> </template><script> export default {name: 'HelloWorld',inhertAttrs: true,props: {msg: {type: String,}},data: function() {return {}},methods: {clickadd () {this.$emit('update:msg', '456')}} } </script>

這段代碼與上一部分實現相同的效果。

可以看到，.sync修飾符僅僅起到一個簡化作用而已。

總結

以上是生活随笔為你收集整理的angular移除事件绑定事件绑定_Vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...的全部內容，希望文章能夠幫你解決所遇到的問題。

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