<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件化开发-子传父 $this.emit('事件名称',参数)</title>
</head>
<body>
<div class="app" id="app">
<h2>子传父 this.$emit('事件名称',参数)</h2>
<cpn @item_had_click='item_clicked'></cpn>
</div>
<template id="cpn">
<div>
<button v-for='item in btns' :key='item.id' @click='item_click(item)'>{{item.name}}</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
const cpn = {
template:'#cpn',
data(){ // data 必须是函数，而且return 一个对象
return {
btns:[
{'id':1,'name':'热门推荐'},
{'id':2,'name':'电脑器材'},
{'id':3,'name':'高端手机'},
{'id':4,'name':'生活用品'},
]
}
},
methods:{
//定义函数，向父组件传递事件
item_click(item){
//向父组件发射事件 this.$emit('事件名称',参数)
this.$emit('item_had_click',item) //向父组件发射 item_had_click 点击事件
},
},
}
const app = new Vue({
el:'#app',
data:{},
// 组件化开发第2步：局部注册组件(component有s)，组件配置已抽离在 全局cpn 变量
components:{'cpn':cpn},
methods:{
item_clicked(item){
// 拿到 item 参数进行数据请求
console.log('item_clicked',item.name)
},
}
})
</script>
</body>
</html>
关键词知识点：
子传父应用场景：例如 点击子1的类目，发送事件和参数到父1请求数据，子2 展示请求回来的数据。
3144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
