<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件通信 子传父</title>
<script src="./vue/vue.js"></script>
</head>
<body>
<!-- 子组件发生了一些事件需要通知父组件 -->
<!-- 自定义事件(类似于@click),通过$emit(事件名,事件信息)方法发射给父组件 -->
<!-- 在父组件使用时监听事件 -->
<div id="app">
<cpn @item-click='cpnClick'></cpn> <!-- 监听事件 -->
</div>
<!-- 子组件模板 写在HTML中 凡是要显示出来的都应该写在HTML中 -->
<template id='cpn'>
<div>
<button v-for='item in categories' @click='btnClick(item)'>{{item.name}}</button> <!-- @click=后面是这个事件发生了的话要调用的处理函数,每个组件都只能调用自己的函数 -->
</div>
</template>
<script>
const cpn={
template:'#cpn',
data(){
return{
categories:[
{id:'a',name:'热门推荐'},
{id:'b',name:'热门推荐'},
{id:'c',name:'热门推荐'},
{id:'d',name:'热门推荐'},
]
}
},
methods:{
btnClick(item){
//发射给父组件
this.$emit('item-click', item)
}
}
}
const p=new Vue({
el: '#app',
components:{
cpn
},
methods:{
cpnClick(item){
console.log('cpnClick');
console.log(item);
}
}
});
</script>
</body>
</html>
两个问题:
1.item 是什么时候生效的,是否是在v-for指令中开始生效的?
2.为什么调用15行cpnClick时不显式的写成cpnClick(item),把item传递过去,并且这么做还会报错。
vue.js:634 [Vue warn]: Property or method “item” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.