一泰偿、組件注冊(cè)使用
組件使用步驟
（全局組件）
①創(chuàng)建組件構(gòu)造器
//構(gòu)造組件方式一
const cpn = Vue.extend({
template:`
<div>
<h1>注冊(cè)的組件</h1>
</div>
`
})
②注冊(cè)組件
Vue.component('mycpn',cpn)
③使用組件 在vue實(shí)例對(duì)象管理的 域 中才能夠使用
<div id="app">
<mycpn></mycpn>
</div>
(局部組件)
//構(gòu)造組件方式二
<template id="cpn">
<div>
<h1>注冊(cè)的組件</h1>
</div>
</template>
const app = new Vue({
el: '#app',
data: {
},
components: {
mycpn: '#cpn'
}
})
（父子組件）
①構(gòu)造子組件
<template id="son_cpn">
<div>
<h1>注冊(cè)的子組件</h1>
</div>
</template>
②父組件中注冊(cè)子組件
const father_cpn = Vue.extend({
template:`
<div>
<h1>注冊(cè)的父組件</h1>
<son-cpn></son-cpn>
</div>`,
components:{
'son-cpn': '#son_cpn' //注冊(cè)子組件
}
})
③注冊(cè)父組件
const app = new Vue({
el: '#app',
data: {
},
components: {
'father-cpn': father_cpn
}
})
④使用
<div id="app">
<father-cpn></father-cpn>
<son-cpn></son-cpn>//無(wú)法解析，子組件只在父組件中注冊(cè)
</div>
語(yǔ)法糖
①方式1
Vue.component('cpn',{
template:`
<div>
<h1>注冊(cè)的組件</h1>
</div>
`
})
②方式2
<template id="cpn">
<div>
<h1>注冊(cè)的組件</h1>
</div>
</template>
const app = new Vue({
el: '#app',
data: {
},
components: {
cpn: {
template: '#cpn'
}
}
})
二案糙、組件間的通信
父?jìng)髯?/h3>
父?jìng)髯拥耐ㄐ磐ㄟ^(guò)props
<div id="app">
<cpn :msg="father_msg"></cpn>
</div>
<template id="cpn">
<div>
<h1>{{msg}}</h1>
</div>
</template>
//子組件
const cpn = {
template: '#cpn',
data(){
return {}
},
props: [ 'msg' ] //定義一個(gè)msg變量 與子組件上綁定的變量一致
/*props對(duì)象寫(xiě)法
props: {
msg:{
type: String,
default: '默認(rèn)數(shù)據(jù)' //父組件沒(méi)傳值時(shí)顯示
}
//or
msg: String
}
*/
}
//父組件實(shí)例
const app = new Vue({
el: '#app',
data: {
father_msg:'父組件的數(shù)據(jù)'
},
components: {
cpn
}
})
子傳父
子傳父的通信通過(guò)自定義事件
<div id="app">
<cpn @fatherclick="fatherclick"></cpn>
</div>
<template id="cpn">
<div>
<h1>子組件內(nèi)容</h1>
<button @click="sonclick">傳數(shù)據(jù)給父組件</button>
</div>
</template>
//子組件
const cpn = {
template: '#cpn',
data(){
return {
son_msg: '子組件的數(shù)據(jù)'
}
},
methods:{
sonclick(){
this.$emit('fatherclick',this.son_msg) //發(fā)射fatherclick事件检盼，并在組件上監(jiān)聽(tīng)該事件
}
}
}
//父組件實(shí)例
const app = new Vue({
el: '#app',
data: {
},
methods:{
fatherclick(data){
console.log(data) //打印 ‘子組件的數(shù)據(jù)’
}
},
components: {
cpn
}
})
父訪(fǎng)問(wèn)子
通過(guò)$children阵具、$refs訪(fǎng)問(wèn)
<div id="app">
<cpn ref="a"></cpn>
<cpn ref="b"></cpn>
<button @click="getchildren">訪(fǎng)問(wèn)子組件</button>
</div>
<template id="cpn">
<div>
<h1>子組件內(nèi)容</h1>
</div>
</template>
//子組件
const cpn = {
template: '#cpn',
data(){
return {
son_msg: '子組件的數(shù)據(jù)'
}
},
methods:{
}
}
//父組件實(shí)例
const app = new Vue({
el: '#app',
data: {
father_msg: '父組件的數(shù)據(jù)'
},
methods:{
getchildren(){
console.log(this.$children) //不常用 輸出一個(gè)對(duì)象Array
console.log(this.$refs) //常用拇泣，需要在子組件上設(shè)置ref屬性
//輸出 {a:{...},b:{...}}
}
},
components: {
cpn
}
})
子訪(fǎng)問(wèn)父
通過(guò)$root、$parent訪(fǎng)問(wèn)
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h1>子組件內(nèi)容</h1>
<button @click="getparent">訪(fǎng)問(wèn)父組件</button>
</div>
</template>
//子組件
const cpn = {
template: '#cpn',
data(){
return {
son_msg: '子組件的數(shù)據(jù)'
}
},
methods:{
getparent(){
console.log(this.$parent) //父組件對(duì)象Array
console.log(this.$root) //獲取根組件對(duì)象
}
}
}
//父組件實(shí)例
const app = new Vue({
el: '#app',
data: {
father_msg: '父組件的數(shù)據(jù)'
},
methods:{
},
components: {
cpn
}
})
三渐裂、slot插槽
使用slot可以讓組件具有擴(kuò)展性,更靈活
具名插槽
<div id="app">
<cpn-box>
<cpn-left slot="left"/>
<cpn-center slot="center"/>
<cpn-right slot="right"/>
</cpn-box>
</div>
<template id="cpn-box">
<div>
<h1>子組件盒子內(nèi)容</h1>
<!-- slot屬性對(duì)應(yīng)name進(jìn)行替換 沒(méi)有slot屬性的會(huì)替換所有沒(méi)有name屬性的插槽!-->
<slot name="left"><span>默認(rèn)左</span></slot>
<slot name="center"><span>默認(rèn)中</span></slot>
<slot name="right"><span>默認(rèn)右</span></slot>
</div>
</template>
<template id="cpn-left">
<div>
<h1>子組件-左</h1>
</div>
</template>
<template id="cpn-center">
<div>
<h1>子組件-中</h1>
</div>
</template>
<template id="cpn-right">
<div>
<h1>子組件-右</h1>
</div>
</template>
//子組件
const cpnbox = {
template: '#cpn-box'
}
const cpnleft = {
template: '#cpn-left'
}
const cpncenter = {
template: '#cpn-center'
}
const cpnright = {
template: '#cpn-right'
}
//父組件實(shí)例
const app = new Vue({
el: '#app',
data: {
},
components: {
'cpn-box': cpnbox,
'cpn-left': cpnleft,
'cpn-center': cpncenter,
'cpn-right': cpnright,
}
})
作用域插槽
使用子組件的data數(shù)據(jù)進(jìn)行插槽需要使用作用域插槽豺旬，否則取不到
先用v-bind對(duì)插槽綁定數(shù)據(jù)，再使用<template slot-scope="slotObj"></template>來(lái)獲取slotObj(插槽對(duì)象)進(jìn)而獲取對(duì)應(yīng)數(shù)據(jù)
<div id="app">
<cpn></cpn>
<cpn>
<template slot-scope="slotObj">
<p>{{slotObj.data}}</p>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<h1>子組件內(nèi)容</h1>
<slot :data="msg">
<span>{{msg}}</span>
</slot>
</div>
</template>
//子組件
const cpn = {
template: '#cpn',
data(){
return {
msg: '子組件的數(shù)據(jù)'
}
}
}
//父組件實(shí)例
const app = new Vue({
el: '#app',
data: {
},
components: {
cpn
}
})
