自定義組件 v-model的深入使用
<z-counter :label="yf.label" :value="yf.count" @input="yf.count=$event"></z-counter>
<z-counter :label="kz.label" v-model="kz.count"></z-counter>
比如在普通的input 的標簽中，我們可以用v-model來實現數據的雙向綁定，在自定義組件中，我們也可以使用v-model的雙向綁定。
首先我們把屬性名改成value,自定義的方法名為input,這個時候我們的格式很像v-model的實現原理，這個時候我們就可以縮寫成v-model來實現數據的雙向綁定
在多個數據需要傳回頁面的時候，這個方法不能夠使用。
Vue.component("z-counter", {
template:
`
<div class="counter">
<div class="label">{{label}}</div>
<div class="btns">
<button @click="mydata--" :disabled="mydata===mincount">-</button>
<input type="text" v-model="mydata" class="text" readonly>
<button @click="mydata++" :disabled="mydata===maxcount">+</button>
</div>
</div>
`,
// props 是只讀的不能修改
//prop 也可以是數組[屬性名]
props: {
label: {
type: String,
//允許為空
required: false,
},
value: {
type: Number,
//不可為空
required: true
},
maxcount: {
type: Number,
default: 999
},
mincount: {
type: Number,
default: 1
}
},
data() {
return {
mydata: this.value
}
},
watch: {
mydata(val) {
this.$emit('input', val)
}
},
})
new Vue({
el: '#app',
data() {
return {
yf:{
label:'衣服',
count:3
},
kz:{
label:'褲子',
count:3
}
}
},
methods: {
}
})
.sync修飾符
這三種方法都可以實現
<div id="app">
<p>{{yf}}</p>
<p>{{kz}}</p>
<p>{{xz}}</p>
<z-counter :yf.sync="yf" :kz.sync="kz" :xz.sync="xz"></z-counter>
<hr>
<z-counter :yf="yf" :kz="kz" :xz="xz" @update:yf="yf=$event" @update:kz="kz=$event" @update:xz="xz=$event"></z-counter>
<hr>
<z-counter :yf.sync="yf" :kz.sync="kz" :xz.sync="xz" @update:yf="yf=$event" @update:kz="kz=$event" @update:xz="xz=$event"></z-counter>
如果在組件中有多個數據需要回傳，這個時候我們可以使用.sync修飾符 ，可以簡化我們的調用過程。
我們的自定義回傳方法yfcount(val){ this.$emit('update:yf', val) }, 加上update：的時候，我們可以在屬性的后面加上.sync修飾符，這個時候，我們的回傳方法可以省略
this.$emit('update:yf', val) update: 后面連接的是父類傳過來的值的名稱 ，需要保持一致
Vue.component("z-counter", {
//模板
template:`
<div>
<div class="counter">
<div class="label">衣服：</div>
<div class="btns">
<button @click="yfcount--" >-</button>
<input type="text" v-model="yfcount" class="text" readonly>
<button @click="yfcount++" >+</button>
</div>
</div>
<div class="counter">
<div class="label">褲子：</div>
<div class="btns">
<button @click="kzcount--" >-</button>
<input type="text" v-model="kzcount" class="text" readonly>
<button @click="kzcount++" >+</button>
</div>
</div>
<div class="counter">
<div class="label">鞋子：</div>
<div class="btns">
<button @click="xzcount--" >-</button>
<input type="text" v-model="xzcount" class="text" readonly>
<button @click="xzcount++">+</button>
</div>
</div>
</div> `,
//自定義屬性
props: ['yf','kz','xz'],
data() {
return {
//將自定義屬性值進行重新賦值給新的變量， 因為自定義屬性不能夠改變默認值
yfcount:this.yf,
kzcount:this.kz,
xzcount:this.xz,
}
},
watch: {
//監聽事件，將新值傳回給頁面
yfcount(val){
this.$emit('update:yf', val)
},
kzcount(val){
this.$emit('update:kz', val)
},
xzcount(val){
this.$emit('update:xz', val)
}
},
})
new Vue({
el: '#app',
data() {
return {
yf:3,
kz:3,
xz:2
}
},
methods: {
}
})
如果觸發的事件名稱是update:屬性名，那么就可以使用..sync修飾符簡化調用的過程。
總結：如果組件只回傳一份數據，用v-model。如果組件回傳多份數據，用.sync修飾符。
具名插槽
當我們的自定義組件中有多個插槽，這個時候我們需要把信息插入到對應的插槽，這個時候我們需要使用到具名插槽。
我們給插槽添加添加一個name屬性，這個就是插槽的名稱。
使用方法：
我們在自定義組件中用<template ></template >把插入的標簽放入到里面 用v-slot:插槽名來插入固定插槽中
v-slot可以用#來代替 v-slot必須是在<template>上使用slot` 可以直接寫在標簽上 如
<span slot="first"><span>
<div id="app">
<z-box>
<template v-slot:house>
<p>4套房子</p>
</template>
<template #car>
<p>三輛車</p>
</template>
<template v-slot:monyse>
<p>1000萬存款</p>
</template>
</z-box>
</div>
Vue.config.productionTip = false
Vue.component('z-box', {
template:`
<div class="box">
<div class="item">
<h2>房產信息</h2>
<slot name="house"></slot>
</div>
<div class="item">
<h2>車輛信息</h2>
<slot name="car"></slot>
</div>
<div class="item">
<h2>存款信息</h2>
<slot name="monyse"></slot>
</div>
</div>
`,
})
new Vue({
el: '#app'
})
作用域插槽
像可以在slot標簽上綁定屬性，這樣外面在使用該插槽時，就可以獲取到上面綁定的數據。 這樣的插槽，我們稱之為：作用域插槽。
我們在自定義組件時，我們可以在<slot>的插槽中綁定屬性 綁定的格式是v-bind：跟普通綁定的屬性是相同的，v-bind 可以省略。
在使用時，我們在template的標簽上用 v-slot:插槽名="變量名"，通常我們的變量名用scope 來當作變量名
<div id="app">
<z-food>
<template v-slot:list="scope">
<button @click="scope.list.splice(scope.index,1)">刪除</button>
<button @click="scope.list[scope.index].price+=100">加價</button>
<button @click="scope.list[scope.index].price-=100">降價</button>
</template>
</z-food>
</div>
Vue.config.productionTip = false
Vue.component("z-food", {
template:`
<div>
<ul>
<li v-for="(item, index) in list" :key="index">{{item.id}}--{{item.name}}--{{item.price}}
<slot name="list" v-bind:index="index" v-bind:list="list"></slot>
</li>
</ul>
</div>
`,
data() {
return {
list:[
{
id:1001,
name:'蛋糕',
price:20
},
{
id:1002,
name:'蛋撻',
price:30
},
{
id:1003,
name:'雞腿',
price:40
},
{
id:1004,
name:'黑巧',
price:50
},
]
}
},
})
new Vue({
el:"#app"
})
混入
全局混入 -- 注意：必須要先執行
mixin()方法的參數是配置對象，Vue實例可以配置的東西，它都可以配置。
比如：數據，方法，生命周期鉤子函數，計算屬性，偵聽器，過濾器，等等...
在mixin()方法中，是先執行的
在全局混入的內容，之后創建的所有Vue實例包括組件實例都將擁有。
在創建Vue實例時，會將mixin里面的成員跟Vue實例自身的成員進行合并，如果沖突了，最終采用Vue實例身上的成員。
特別注意：生命周期鉤子不是合并，是疊加執行，是先執行mixin里面的生命周期鉤子，再執行Vue實例里面的生命周期鉤子。
Vue.mixin({
data() {
return {
name: '',
age: 22,
sex: '男',
salary: 10000
}
},
computed: {
tosalary() {
return this.salary * 0.86
}
},
methods: {
jian() {
this.age++
if (this.age > 100) {
alert('年齡不能超過100');
this.age = 100
}
}
}
})
混入ajax的基本操作
我們可以在Vue.mixin() 可以寫個ajax的封裝方法，這樣我們在實例中可以直接調用封裝過的ajax
Vue.mixin({
methods: {
// get方法
async $get(url,params){
let {data} = await axios.get(this.base_url+url,{params})
return data
},
// post方法
async $post(url,params){
let {data} = await axios.post(this.base_url+url,params)
return data
}
},
})
