1.props:用来接收父组件传递的数据,可以是数组,也可以是对象
如果是对象,
type可以是String,Number,Boolean,Array,Object,Date,Function,Symbol,自定义构造函数
default: 给父组件传入的数据一个默认值,如果父组件没有数据传入,就用默认值,如果传入,则是父组件传入的值。对象或数组的默认值必须从一个函数返回
required: true/false 这个传入的prop是否必填
validator: 函数,对传入的数据进行校验
props: {
propsName: {
type: Number,
default: defaultValue,
validator: function (value) {
return value >= 0
}
},
data: {
type: Array,
default: () => []
},
data1: {
type: Array,
default: () => [1,2,3]
},
data2: {
type: Array,
default: () => [
{
id: 1,
name: 'aaaa'
},
{
id: 2,
name: 'bbbb'
}
]
},
obj:{
type: Object,
default() => {}
},
obj1: {
type: Object,
default() {
return {
name: 'abc',
age: 20
}
}
}
}
2.$emit
$emit(eventName,[...args]) :点击子组件向父组件传递事件名称和参数,事件名称String类型,参数可以是多个,
父组件监听子组件触发的事件@eventName="handleEvent",然后在父组件响应handleEvent事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="input" /><button type="button" @click="handleAdd">提交</button>
<ul>
<todo-item v-for="(itm,ind) in list" :key="ind" :content="itm.name" :index="ind" @delete="handleDelete"></todo-item>
</ul>
</div>
<script>
//创建全局组件,组件名可以使用 kebab-case 字母小写且用-连接,如todo-item,或者PascalCase首字母大写TodoItem
// Vue.component('todo-item',{
// props: ['content'],
// template: '<li>{{content}}</li>'
// })
//创建局部组件
let TodoItem = {
props: ['content','index'],
template: '<li>{{content}}<button @click="handleClick">删除</button></li>',
methods: {
handleClick(){
//子组件向父组件传值,使用$emit向外触发事件,这里触发delete事件,然后在父组件里监听delete事件
this.$emit('delete',this.index,20)
}
}
}
let app = new Vue({
el: '#app',
components:{
TodoItem
},
data: {
input: '',
list: [
{
id: 1,
name: 'html'
},
{
id: 2,
name: 'css'
},
{
id: 3,
name: 'js'
}
]
},
methods:{
handleAdd(){
let params = {
id: this.list.length,
name: this.input
}
this.list.push(params)
this.input = ""
},
handleDelete(index,val){
console.log(index);
console.log(val)
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>