Vue 插槽和自定义事件
官方给出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>
