vuejs父子組件通信的問(wèn)題
更新時(shí)間：2017年01月11日 16:46:24 作者：lhy031
本篇文章主要介紹了vue父子組件通信 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
父子組件之間可以通過(guò)props進(jìn)行通信：
組件的定義：
1.創(chuàng)建component類：
var Profile = Vue.extend({
template: "<div>Lily</div>";
})
2.注冊(cè)一個(gè)tagnme:
Vue.component("me-profile",Profile);//全局注冊(cè)
局部注冊(cè)：
var vm = new Vue({
el: "#todo",
components: {
"my-profile": Profile
},
...
}
模板注意事項(xiàng)：
因?yàn)?Vue 就是原生的DOM，所以有些自定義標(biāo)簽可能不符合DOM標(biāo)準(zhǔn)，比如想在 table 中自定義一個(gè) tr，如果直接插入 my-component 不符合規(guī)范，所以應(yīng)該這樣寫：
<table> <tr is="my-component"></tr> </table>
在子組件中有一個(gè)this.$parent和this.$root可以用來(lái)方法父組件和跟實(shí)例。（但是不推薦）
Vue中子組件可以通過(guò)事件和父組件進(jìn)行通信。向父組件發(fā)消息是通過(guò)this.$dispatch,而向子組件發(fā)送消息是通過(guò)this.$boardcast,這里都是向所有的父組件和子組件發(fā)送消息。
子組件:
props: {
url: {
type: Array,
default: function() {
return []
}
}
}，
methods: {
add: function() {
this.$dispatch("add", this.input); //這里就是向父組件發(fā)送消息
this.input = "";
}
}
父組件：
data() {
return {
url: .....
}
}，
events: {
add: function(input) {
if(!input) return false;
this.list.unshift({
title: input,
done: false
});
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Element實(shí)現(xiàn)動(dòng)態(tài)表格的示例代碼
最近有有個(gè)項(xiàng)目，通過(guò)選擇不同的查詢指標(biāo)展示不同的表格，所以本文就介紹一下Element實(shí)現(xiàn)動(dòng)態(tài)表格，具體實(shí)現(xiàn)代碼記錄如下，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了vue?axios中的get請(qǐng)求方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
關(guān)于導(dǎo)入、配置Vuetify遇到的幾個(gè)問(wèn)題
這篇文章主要介紹了關(guān)于導(dǎo)入、配置Vuetify遇到的幾個(gè)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue el-table 動(dòng)態(tài)添加行與刪除行的實(shí)現(xiàn)
這篇文章主要介紹了vue el-table 動(dòng)態(tài)添加行與刪除行的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue中使用create-keyframe-animation與動(dòng)畫(huà)鉤子完成復(fù)雜動(dòng)畫(huà)
這篇文章主要介紹了Vue中使用create-keyframe-animation與動(dòng)畫(huà)鉤子完成復(fù)雜動(dòng)畫(huà)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要介紹了Vue使用Proxy代理后仍無(wú)法生效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
在前后端分離項(xiàng)目中,跨域是一定會(huì)出現(xiàn)的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue學(xué)習(xí)筆記之跨域的6種解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作
這篇文章主要介紹了antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue 巧用過(guò)渡效果(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09