vue組件掛載及其之間通信

vue組件掛載步驟
1.在src文件下創建文件夾component,放置子組件文件名.vue 即創建的組件
2.註冊組件
創建的子組件需要掛載到app組件裏面,就在該組件內部直接引入子組件
組件在誰裏面使用 在誰裏面註冊 這中註冊方式叫局部註冊
局部註冊的組件只能在父組件裏面使用
在script下面引入 import 別名 from 文件路徑
2.註冊組件 在屬性components裏面進行註冊
常規寫法 鍵值的形式 簡寫 直接使用組件變量 鍵和值一樣的時候可以直接簡寫
export default {
name: "app",
components: {
// "v-toptitle": topTitle,
// "v-leftmenu": leftMenu,
// "v-rightcontent": rightContent
topTitle,
leftMenu,
rightContent
},
}
3註冊完成之後,在template裏面使用
<topTitle></topTitle>
<leftMenu></leftMenu>
<rightContent></rightContent>

全局註冊是在main.js裏面註冊
//整個項目的組件都可以使用   

//註冊給整個vue對象
//1.引入需要註冊的全局組件
import getTime from './component/child/getTime'
在vue類的方法 component裏面進行註冊
//Vue.component("v-times",getTime);
// Vue.component('v-times',{
// template:"<div>{{msg}}</div>", //字符串的標籤模板
// data(){ //當前模板的數據
// return {
// msg:"時間1"
// }
// }
// });

組件掛載完成後,涉及到子父之間的傳值以及非子父之間的傳值
<!-- logo子組件是toptitle的子組件 -->
<!-- 子組件接收父組件的傳值
子組件需要logo name兩個變量的值
父組件通過屬性綁定的方式 傳值 如果不傳之 可以走默認值

//父組件獲取子組件的所有內容
//使用ref獲取虛擬的dom來獲取子組件

//自定義事件   $emit(觸發)   v-on(監聽)   事件車    可以在組件上使用this直接實現
//組件的自定義事件  在子組件內部觸發  在組件上做監聽處理    監聽到之後調用的方法是父組件的方法
//作用是  子組件 修改父組件的相關變量

//非父子關係組件之間的傳值  
使用$emit   $on  做之間的通信   使用new vue()對象實現
-->

//非父組件直接通信使用事件車 來源於new Vue(),
在main.js裏面寫入
Vue.prototype.EmitEvent=new Vue();

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章