目錄
父組件向子組件傳值
子組件修改父組件中的值：
方法1
方法2
子組件調用父組件里的函數(shù)
方法1
方法2
父組件調用子組件的函數(shù)
：
父組件向子組件傳值
子組件中的 data 屬性是用來存儲子組件自身的數(shù)據(jù)，而不是用來接收父組件傳遞的數(shù)據(jù)的。父組件向子組件傳遞數(shù)據(jù)的常用方式是通過 props。
在 Vue.js 中，props 是一個屬性，可以用來從父組件傳遞數(shù)據(jù)到子組件。子組件可以接受這些數(shù)據(jù)，并在其模板中使用它們。
//1.聲明組件模板對象
const login = {
template:'<div><h2>歡迎: {{ name }} 年齡:{{ age }}</h2></div>',
props:['name','age']
}
//2.注冊局部組件
const app = new Vue({
el: "#app",
data: {
username:"小陳陳",
age:23
},
methods: {},
components:{
login //注冊組件
}
});
//3.使用組件
<login :name="username" :age="age"></login> //使用v-bind形式將數(shù)據(jù)綁定Vue實例中data屬性,日后data屬性發(fā)生變化,組件內(nèi)部數(shù)據(jù)跟著變化子組件修改父組件中的值：
在Vue中，子組件不能直接改變父組件的數(shù)據(jù)，因為Vue是單向數(shù)據(jù)流的。但是可以通過觸發(fā)父組件的事件并傳遞數(shù)據(jù)來實現(xiàn)子組件改變父組件的數(shù)據(jù)。
方法1
具體步驟如下：
-
在父組件中定義一個方法，用于修改需要改變的數(shù)據(jù)。
-
在父組件模板中使用子組件，并為該組件綁定一個自定義事件，當子組件需要修改數(shù)據(jù)時，就會觸發(fā)這個事件。
-
在子組件中，使用
$emit方法觸發(fā)自定義事件，并將需要修改的數(shù)據(jù)作為參數(shù)傳遞給父組件。 -
父組件接收到事件后，調用定義好的方法，修改數(shù)據(jù)。
示例代碼如下：
父組件：
<template>
<div>
<p>{{ message }}</p>
<child-component @change-message="changeMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
data() {
return {
message: ''
}
},
methods: {
changeMessage(newMessage) {
this.message = newMessage
}
}
}
</script>
子組件：
<template>
<div>
<button @click="updateMessage">點擊我更新父組件的消息</button>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
methods: {
updateMessage() {
this.$emit('change-message', '新的消息')
}
}
}
</script>
在子組件中，我們定義了一個 updateMessage 方法，在該方法中調用 $emit 方法觸發(fā)自定義事件，并將字符串 '新的消息' 作為參數(shù)傳遞給父組件。在父組件中，我們定義了一個 changeMessage 方法，該方法將接收子組件傳遞過來的參數(shù)，并將其賦值給 message 數(shù)據(jù)，從而改變父組件的數(shù)據(jù)。
注意，父組件中使用 @change-message="changeMessage" 將自定義事件 change-message 和父組件的 changeMessage 方法綁定起來，這樣當子組件觸發(fā)自定義事件時，就會調用父組件中的方法。
方法2
如果使用 sync 修飾符，可以更簡便地實現(xiàn)子組件修改父組件數(shù)據(jù)的操作。
具體步驟如下：
-
在父組件中將需要修改的數(shù)據(jù)作為屬性傳遞給子組件，并使用
:value.sync的語法，表示這是一個雙向綁定的屬性。 -
在子組件中，通過修改該屬性的值，就能夠直接修改父組件的數(shù)據(jù)。
示例代碼如下：
父組件：
<template>
<div>
<p>{{ message }}</p>
<child-component :message.sync="message"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
data() {
return {
message: ''
}
}
}
</script>
子組件：
<template>
<div>
<button @click="updateMessage">點擊我更新父組件的消息</button>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
message: String
},
methods: {
updateMessage() {
this.$emit('update:message', '新的消息')
}
}
}
</script>
在父組件中，我們將 message 屬性作為參數(shù)傳遞給子組件并使用 :value.sync 的語法來實現(xiàn)雙向綁定。子組件中可以直接修改 message 屬性的值，從而實現(xiàn)修改父組件數(shù)據(jù)的效果。在子組件中，我們使用 $emit 方法觸發(fā) update:message 事件，并將 '新的消息' 作為參數(shù)傳遞給父組件。
注意，在子組件中修改屬性值時，不能直接使用 this.message = '新的消息' 的語法，而是應該使用 $emit('update:message', '新的消息')，因為這樣才能夠正確地更新父組件中的數(shù)據(jù)。在父組件中，我們需要監(jiān)聽 update:message 事件，并將其綁定到一個方法上，用于更新父組件中的數(shù)據(jù)。
子組件調用父組件里的函數(shù)
方法1
在 Vue 中，可以通過 props 屬性將父組件中的函數(shù)傳遞給子組件。
首先，在父組件中定義一個函數(shù)，例如：
methods: {
handleClick() {
// do something
}
}
然后，在父組件中使用子組件時，將該函數(shù)作為 props 屬性傳遞給子組件，例如：
<template>
<child-component :handleClick="handleClick" />
</template>
最后，在子組件中接收傳遞過來的函數(shù)，并在需要的地方調用它，例如：
props: {
handleClick: Function
},
methods: {
someMethod() {
// call the handleClick function from parent component
this.handleClick();
}
}
方法2
在Vue中，可以使用$emit方法向父組件派發(fā)一個自定義事件，并傳遞參數(shù)。父組件可以在模板中監(jiān)聽這個自定義事件，并定義相應的事件處理函數(shù)來響應子組件的操作。
具體的做法是，在子組件中通過this.$emit(event, [...args])方法觸發(fā)一個自定義事件，并傳遞需要的參數(shù)。父組件可以在模板中監(jiān)聽這個自定義事件，并定義一個相應的方法來處理子組件的操作。
例如：
<!-- 父組件 -->
<template>
<div>
<child-component @child-click="handleClick"></child-component> <!-- 監(jiān)聽子組件的自定義事件 -->
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleClick() {
console.log('點擊了子組件的按鈕');
}
}
};
</script>
<!-- 子組件 -->
<template>
<button @click="handleButtonClick">點擊我</button>
</template>
<script>
export default {
methods: {
handleButtonClick() {
this.$emit('child-click'); // 觸發(fā)自定義事件
}
}
};
</script>
在上面的例子中，子組件定義了一個名為handleButtonClick的方法，當按鈕被點擊時會通過this.$emit('child-click')方法觸發(fā)一個自定義事件'child-click'。父組件在模板中監(jiān)聽了這個自定義事件，并定義了一個名為handleClick的方法來處理這個事件。當子組件中的按鈕被點擊時，會觸發(fā)自定義事件，并調用父組件中的handleClick方法。
父組件調用子組件的函數(shù)
在 Vue 中，父組件可以通過 $refs 屬性引用子組件，并調用其方法。具體步驟如下：
-
在子組件中，給需要調用的函數(shù)添加一個
ref屬性，例如myFunction。 -
在父組件中，通過
$refs屬性獲取子組件實例，然后調用子組件的方法。示例代碼如下：<template> <div> <ChildComponent ref="child"></ChildComponent> <button @click="callChildMethod">調用子組件方法</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { callChildMethod() { this.$refs.child.myFunction(); } } } </script> -
在上面的示例代碼中，父組件首先在模板中使用
<ChildComponent>標簽引入了子組件，并設置了一個ref屬性為child。然后，在父組件中定義了一個callChildMethod方法，該方法通過this.$refs.child獲取到子組件實例，然后調用了myFunction方法。 -
注意：只有當子組件已經(jīng)被掛載到 DOM 中才能使用
$refs。如果嘗試在子組件還沒有被掛載的時候獲取$refs，則會返回undefined。文章來源：http://www.zghlxwxcb.cn/news/detail-732437.html如果覺得組件之間的數(shù)據(jù)傳輸過于麻煩復雜的時候，可以學習vuexVuex詳解，一文徹底搞懂Vuex_Mr.指尖舞者的博客-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-732437.html
到了這里，關于前端vue中父子組件之間的傳值（修改值）和事件的相互調用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
