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();