官方給出prop例子
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
自定義事件
-
不同於組件和 prop，事件名不存在任何自動化的大小寫轉換。而是觸發的事件名需要完全匹配監聽這個事件所用的名稱。舉個例子，如果觸發一個 camelCase 名字的事件：
this.$emit('myEvent')
自定義組件的 v-model
-
一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復選框等類型的輸入控件可能會將 value attribute 用於不同的目的。model 選項可以用來避免這樣的沖突：
Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > ` }) -
現在在這個組件上使用 v-model 的時候：
<base-checkbox v-model="lovingVue"></base-checkbox> -
這里的 lovingVue 的值將會傳入這個名為 checked 的 prop。同時當 觸發一個 change 事件並附帶一個新的值的時候，這個 lovingVue 的 property 將會被更新。
插槽的使用
<!--v-bind:rzk的意思是 {message遍歷出來的值需要綁定到props里面 然后通過模板顯示出來}-->
<!--組件: 傳遞給組件中的值, 通過props 去接收-->
<div id="app">
<pig v-for="m in message" v-bind:rzk="m"></pig>
</div>
<!--導入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("pig",{
props: ['rzk'],<!--接收綁定的值-->
template: '<li>{{rzk}}</li>'<!--通過props接收到的值傳給li里面-->
});
//通過new Vue 可以聲明全局變量,new返回的對象就是應用對象
var vm = new Vue({
el: "#app",
data: {
message: ["hello,vue!","Java","Mysql"]
}
});
</script>
示例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
<!--導入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//slot:插槽
Vue.component("todo",{
template:'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
})
Vue.component("todo-items",{
props: ['item','index'],
//模板
template: '<li>{{index}} -- {{item}} <button @click="remove">刪除</button></li>',
methods: {
remove: function (index) {
alert("進入")
this.$emit('remove',index);
}
}
})
var vm = new Vue({
el: "#app",
data: {
title: "Rzk博客",
todoItems: ['rzk','MySQL','Java']
},
methods: {
removeItems: function (index) {
console.log("刪除" + this.todoItems[index] + "OK");
this.todoItems.splice(index,1);//一次刪除一個元素
}
}
});
</script>
</body>
</html>