組件
組件系統(tǒng)是 Vue 的另一個重要概念，因?yàn)樗且环N抽象，允許我們使用小型录语、獨(dú)立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用禾乘。仔細(xì)想想澎埠，幾乎任意類型的應(yīng)用界面都可以抽象為一個組件樹
- 創(chuàng)建組件的兩種方式：1 全局組件 2 局部組件
全局組件
- 說明：全局組件在所有的vue實(shí)例中都可以使用
- 注意：先初始化根實(shí)例再注冊組件
- 注意：組件中的
data必須是函數(shù)
<div id="app">
<!-- 使用自定義元素的方式 -->
<!-- 使用組件 -->
<my-component></my-component>
</div>
<!-- 引入vue -->
<script src="./vue.js"></script>
<script>
// 創(chuàng)建全局組件 不能放在 new Vue 的下面 否者會報(bào)錯
// 第一個參數(shù)：表示組件名稱
// 第二個參數(shù)：表示組件的配置對象
Vue.component('my-component', {
// 指定組件中展示的HTML內(nèi)容
// 注意：組件的模版中必須有唯一的根元素，否則始藕，會報(bào)錯
// template: '指定需要展示的內(nèi)容',
// ES6: 字符串模板 通過 反引號 使用
template: `
<div>
<p>我是全局組件 </P>
<div v-color>內(nèi)容 --- {{ msg }} --- {{ num }}</div>
<button @click="fn">組件觸發(fā)事件</button>
</div>
`,
data() {
return {
msg: '注意：組件的data必須是一個函數(shù)Ｆ盐取５鳌！',
num:100
}
},
// 用來設(shè)置模板中的事件
methods:{
fn(){
this.num += 1
}
},
// 自定義屬性
directives:{
color(el){
el.style.color='red'
}
}
});
// 關(guān)聯(lián)到頁面中 (組件要渲染的地方)
var vm = new Vue({
el: '#app',
data: {
}
})
// ===> 渲染結(jié)果
請看下面的這張圖片
</script>
渲染結(jié)果.png
局部組件
- 說明：局部組件江耀，是在某一個具體的vue實(shí)例中定義的剩胁，只能在這個vue實(shí)例中使用
<div id="app">
<hello></hello>
</div>
<script src="./vue.js"></script>
<script>
// 創(chuàng)建 vue 實(shí)例
var vm = new Vue({
el: '#app',
data: {
},
// 創(chuàng)建局部組件
components: {
// hello 表示組件名稱
// 對象表示該組件的配置對象
hello: {
template: ` <h1>局部組件</h1>`
}
}
});
組件通訊
父組件到子組件
- 方式：通過
props屬性來傳遞數(shù)據(jù) - 注意：屬性的值必須在組件中通過
props屬性顯示指定，否則祥国，不會生效 - 說明：傳遞過來的
props屬性的用法與data屬性的用法相同
<div id="app">
<child :msg='parentProp'></child>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
parentProp:'父組建中的屬性'
},
// 創(chuàng)建局部組件
components:{
// 子組件
child:{
// props 監(jiān)聽父組件傳遞過來的信息
props:['msg'],
// 傳遞過來后昵观，可在 template 模板里直接引用，就如已經(jīng)傳遞過來數(shù)據(jù)塞到data
template:`<h1>{{ msg }}</h1>`
}
}
})
</script>
子組件到父組件
- 方式：父組件給子組件傳遞一個函數(shù)舌稀，由子組件調(diào)用這個函數(shù)
- 說明：借助vue中的自定義事件（v-on:cunstomFn="fn"）
-
$emit()：觸發(fā)事件
<div id="app">
<h1>父組件: 這是子組件傳遞過來的數(shù)據(jù) -----{{ msg }} </h1>
<!-- 此處的方法 pfn 就是父組件中提供的屬性 -->
<child v-on:pfn='parentFn'></child>
</div>
<script src="./vue.js"></script>
<script>
// 子組件傳遞數(shù)據(jù)給父組件
// 1 由父組件提供一個方法
// 2 這個方法需要讓子組件來調(diào)用
// 3 在子組件中調(diào)用父組件的方法 啊犬，將要傳遞的數(shù)據(jù)作為 父組件方法的參數(shù)
// 進(jìn)行傳遞
var vm = new Vue({
el: '#app',
data: {
msg :''
},
methods:{
parentFn(arg){
console.log(arg)
this.msg = arg
}
},
// 創(chuàng)建組件
components : {
// 子組件
child :{
template :`
<button @click="test">子組件傳遞數(shù)據(jù)給父組件</button>`,
methods: {
// 子組件：通過$emit調(diào)用
test(){
this.$emit('pfn','這是數(shù)據(jù)')
}
}
}
}
})
</script>
另外的一種情況是當(dāng)父組件和子組件都有一個獨(dú)立的文件時候怎么實(shí)現(xiàn)通訊呢？
- 三個步驟：
1.在父組件中引入子組件
// 導(dǎo)入 numberbox 組件
import NumberBox from '../common/NumberBox.vue'
2.在父組件export default{
//里面 導(dǎo)入 components: { NumberBox }
}
3.在父組件中創(chuàng)建一個 <NumberBox ></NumberBox>標(biāo)簽壁查，這個標(biāo)簽用來存放子組件的內(nèi)容
非父子組件通訊
在簡單的場景下觉至，可以使用一個空的 Vue 實(shí)例作為事件總線
-
$on()：綁定事件
var bus = new Vue()
// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)
// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
// ...
})
- 示例：組件A ---> 組件B
<div id="app">
<comb></comb>
<coma></coma>
</div>
<script src="./vue.js"></script>
<script>
// a組件 傳遞數(shù)據(jù)給 b組件
// 也就是：b組件注冊事件，由a組件觸發(fā)這個事件
// 創(chuàng)建一個空的Vue實(shí)例對象睡腿，
var bus = new Vue()
var vm = new Vue({
el: '#app',
components: {
// b組件
comb: {
template: '<h1>這是 B組件 --- {{ msg }}</h1>',
data() {
return {
msg: ''
}
},
created() {
// 綁定事件
bus.$on('fn', (arg) => {
console.log(arg);
this.msg = arg
})
}
},
// a組件
coma: {
template: `<button @click="send">A組件的按鈕</button>`,
methods: {
send() {
bus.$emit('fn', '這是a傳遞給b的數(shù)據(jù)')
}
}
}
}
})
</script>
