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