目錄
組件化開發
組件模塊的分離
組件中的data為什么是函式
組件通信父傳子props
組件通信子傳父$emit(發射事件)
組件訪問父訪問子
組件訪問子訪問父
組件化高級
slot插槽的基本使用
具名插槽的作用
組件化開發
組件模塊的分離
<div id="app">
<cpn></cpn>
</div>
<!-- 第1個方法.script標簽型別必須是type="text/x-template" -->
<!-- <script type="text/x-template" id="cpn"> -->
<!-- 組件寫這里更方便 -->
<!-- <div>
<h2>標題</h2>
<p>內容</p>
</div>
</script> -->
<!-- 第2個方法.template標簽 -->
<template id="cpn">
<div>
<h2>標題</h2>
<p>內容</p>
</div>
</template>
<script>
// 注冊一個component全域組件的語法糖更方便,不用創建組件構造器
Vue.component('cpn', {
template: '#cpn'
})
const app = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>組件中的data為什么是函式
<script>
// 1.注冊組件
Vue.component('cpn',{
template:'#cpn',
// data()必須是個函式,不是函式也會報錯,
//data:{}這樣多個呼叫都指向一個記憶體地址一個變一起變,
// data()這樣每次呼叫就會有一個新的記憶體地址,自己改自己的記憶體東西
// 每一個組件實體都有自己的狀態,他都需要一個物件來保存屬于自己的狀態
data(){
return {
counter:0
}
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
</script>組件通信父傳子props
<div id="app">
<!-- <cpn v-bind:cmovies="movies" :cmessage="message"></cpn> -->
<!-- 這里只負責賦值了,沒有輸出 -->
<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>
<!-- 組件模板 -->
<template id="cpn">
<!-- 內部代碼多必須有個根標簽包裹,比如這個div -->
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
<h2>{{cmessage}}</h2>
</div>
</template>
<script>
//父傳子props
const cpn = {
template: '#cpn',
// 一，陣列方式
// props:['cmovies','cmessage'],
// 二，物件方式
props: {
// 1.型別限制
// cmovies:Array,
// cmessage:String,
// 2.給字串提供一些默認值
cmessage: {
// 型別
type: String,
// default當別人沒傳值的默認值
default: 'aaaaa',
// required必須傳值
required:true
},
// 給陣列設定
// 型別是物件或陣列時，默認值default必須是一個函式
cmovies:{
type:Array,
default(){
return []
}
}
},
data() {
return {}
},
methods: {
}
}
// 父組件，實體
const app = new Vue({
el: '#app',
data: {
message: '你好吖',
movies: ['海王', '海賊王', '海爾兄弟']
},
// components注冊組件
components: {
// 相當于cpn:cpn ，是es6的增強寫法
cpn
}
});
</script>組件通信子傳父$emit(發射事件)
<!-- 父組件模板 -->
<div id="app">
<cpn @item-click="cpnClick"></cpn>
</div>
<!-- 子組件模板 -->
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">
{{item.name}}
</button>
</div>
</template>
<script>
// 1.子組件
const cpn = {
template:'#cpn',
data(){
return {
categories:[
{id:'aaa',name:'熱門推薦'},
{id:'bbb',name:'手機數碼'},
{id:'ccc',name:'家用家電'},
{id:'ddd',name:'電腦辦公'}
]
}
},
methods:{
btnClick(item){
//$emit 發射事件：自定義事件
// 子傳父就是通過自定義事件傳遞的
// item-click自定義事件的名字,item自定義事件的引數
this.$emit('item-click',item)
}
}
}
// 2.父組件
const app = new Vue({
el: '#app',
data: {},
methods: {
cpnClick(item){
// 獲取到了子組件cpn里的物件屬性
console.log(item);
}
},
components:{
cpn
}
});
</script>組件訪問父訪問子
<div id="app">
<cpn></cpn>
<cpn ref="aaa"></cpn>
<button @click="btnClick">按鈕</button>
</div>
<template id="cpn">
<div>
我是子組件
</div>
</template>
<script>
const app = new Vue({
el: '#app',
data: {},
// methods裝函式
methods: {
btnClick(){
// 2.$refs是物件型別，默認是一個空的物件，必須在組件上加 ref='bbb'
,一般用這個 直接鎖定元素
console.log(this.$refs.aaa.name);
}
},
// components注冊組件
components:{
cpn:{
template:'#cpn',
data(){
return {
name:'我是子組件的name'
}
},
methods:{
showMessage(){
console.log('showMessage');
}
}
}
}
});組件訪問子訪問父
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是cpn組件</h2>
<ccpn></ccpn>
</div>
</template>
<template id="ccpn">
<div>
<h2>我是子組件</h2>
<button @click="btnClick">按鈕</button>
</div>
</template>
<script>
const app = new Vue({
el: '#app',
data: {},
// methods裝函式
methods: {
},
// components注冊組件
// 父
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '我是cpn組件的name'
}
},
// 子
components: {
ccpn: {
template: '#ccpn',
methods: {
btnClick() {
// 1.訪問父組件$parent ，用的非常少
// console.log(this.$parent);
// console.log(this.$parent.name)
// 2.訪問根組件$root
console.log(this.$root);
}
}
}
},
}
}
});
</script>組件化高級
slot插槽的基本使用
<!-- 1.插槽的基本使用 寫個空的啥也不加<slot></slot>
2.可以加默認值，<slot>內容</slot>
3.多個值可以同時放到組件一起替換 -->
<div id="app">
<cpn></cpn>
<cpn><span>我是span</span></cpn>
<cpn>
<i>我i是</i>
<p>我是p</p>
</cpn>
</div>
<template id="cpn">
<div>
<h2>我是組件</h2>
<p>我是組件的p</p>
<slot><button>按鈕</button></slot>
</div>
</template>
<script>
const app = new Vue({
el: '#app',
data: {},
methods: {},
components:{
cpn:{
template:'#cpn'
}
}
});
</script>具名插槽的作用
<div id="app">
<cpn><span slot="center">換的中間</span></cpn>
<cpn><button slot="left">換的左邊</button></cpn>
</div>
<template id="cpn">
<div>
<!-- 加上name可以指定換那個 -->
<slot name="left"><span>左邊</span></slot>
<slot name="center"><span>中間</span></slot>
<slot name="right"><span>右邊</span></slot>
</div>
</template>
<script>
const app = new Vue({
el: '#app',
data: {},
methods: {},
components:{
cpn:{
template:'#cpn',
}
}
});
</script>博主公_號：前端老實人，期待各位小伙伴加入我們一起學習的隊伍哦?
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/300289.html
標籤：其他