vue父-子-点击事件传递
2020-04-11 本文已影响0人
O蚂蚁O
1、
$emit
2、
父组件
<template>
<section class="product-entering-list">
<child
:options="options"
></child>
</section>
</template>
<script>
import child from "./child"
export default {
name: 'test',
components: { child },
data() {
return {
options: [
{
txt: '点击我',
handler: () => {
this.handleClick()
}
}
]
}
},
mounted() {
},
methods: {
handleClick() {
console.log('我是父组件');
}
}
}
</script>
<style lang="less">
</style>
子组件
<!--
* @Author: your name
* @Date: 2020-04-11 10:37:24
* @LastEditTime: 2020-04-11 10:57:50
* @LastEditors: your name
* @Description: In User Settings Edit
* @FilePath: \longzhu-mdm-web\src\views\kit\productLibrary\productScan\child.vue
-->
<template>
<section class="product-entering-list">
<el-button v-for="(item, index) in options" :key="index"
type="primary"
@click.stop="() => item.handler()"
>
{{item.txt}}
</el-button>
</section>
</template>
<script>
export default {
name: 'child',
components: { },
props: {
options: {
type: Array,
default: () => ([])
},
},
data() {
return {
}
},
mounted() {
},
methods: {
handleClick(val) {
}
}
}
</script>
<style lang="less">
</style>
