网站首页 > 教程文章正文

前端vue子组件向父组件传递点击事件和参数

jxf315 2025-10-13 23:12:47 教程文章 1 ℃

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<button v-for="item in categories"

@click="btnclick(item)">

{{item.name}}

</button>

</div>

</template>

// 子组件

const cpn = {

template: '#cpn',

data(){

return {

categories:[

{id: 'aaa', name: '热门推荐'},

{id: 'aaa', name: '手机数码'},

{id: 'aaa', name: '家用家电'},

{id: 'aaa', name: '电脑办公'}

]

}

// 方法：存放函数

methods:{

btnclick(item){ // 按钮点击调用的函数

// console.log(item.name) // 打印item的名字

this.$emit('itemclick', item) // 发射事件名为：'itemclick'，参数为：item

}

// 父组件

const app = new Vue({

el: '#app',

data:{

message: '我是父组件'

components:{ // 注册子组件

cpn

methods:{

cpnclick(item){ // cpn被点击事件

console.log(item.name) // 打印按钮名称

}

})

</script>

</body>

</html>

上一篇： Vue 组件通信:Props 层层传 vs 插槽灵活配，到底哪条路才不踩坑?
下一篇： Vue实战053:el-menu组件实现路由导航菜单详解

网站首页 > 教程文章 正文

前端vue子组件向父组件传递点击事件和参数

猜你喜欢

网站首页 > 教程文章正文