父传子是通过props,子传父是通过$emit
父向子传递-props
props的值有两种方式
-
字符串数组,数组中的字符串就是传递时的名称
-
对象,对象可以设置传递时的类型,也可以设置默认值
prop大小写的问题
HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符
。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
prop类型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
子传父(自定义事件)-$emit
<body>
<!-- 子组件中产生的事件父组件知道 -->
<div id="app">
<cpn @itemclick='preClick'></cpn>
</div>
<template id="cpn">
<div >
<button v-for="item in categories " @click="btnClick(item)" >{{item.name}}</button>
</div>
</template>
<script>
const cpn = {
template:'#cpn',
data(){
return{
//子组件中的数据
categories:[
{id:'aaa',name:'热门推荐'},
{id:'bbb',name:'手机数码'},
{id:'ccc',name:'美妆'},
{id:'ddd',name:'女装服饰'}
]
}
},
methods:{
btnClick(item){
//console.log(item);
//将子组件事件传给父组件
//发射一个事件
this.$emit('itemclick',item);
}
}
}
//父组件
new Vue({
el: '#app',
data: {
},
components:{
cpn
},
methods:{
preClick(item){
console.log('itemclick',item);
}
}
})
</script>
</body>
练习