父组件:是指引用其他组件东西(这里叫attrgroup.vue)
子组件:是指被其他组件引用的东西(这里叫category.vue)
父组件引用子组件,如下:
<template>
<!-- tree 属性菜单 -->
<!-- tree-node-click 是子组件自定义的事件,通过事件触发然后由父组件进行感知获取数据 -->
<category @tree-node-click="treenodeclick"></category>
</template>
<script>
import category from '../../common/category.vue';
components: {
category
},
</script>
子组件进行事件的散发 这里以tree属性菜单被点击为例:
<template>
<!-- 这里通过绑定tree的节点点击事件来触发我们自己定义的事件(tree-node-click) -->
<div>
<el-tree :data="data" :props="defaultProps" node-key="catId" ref="tree" @node-click="nodeclick">
</el-tree>
</div>
</template>
<script>
nodeclick(data,node,component){
// console.log("子组件被点击:" ,data,node,component)
this.$emit("tree-node-click",data,node,component)
}
methods: {
treenodeclick(data,node,component){
console.log("父组件感知到事件:" ,data,node,component)
this.$message({
message: data.catId,
type: 'success'
})
},
}
</script>
// 最后通过自定义方法就能够获取到子组件传递的值了
标签:node,category,vue,component,父子,组件,data From: https://www.cnblogs.com/huoziqi/p/17557818.html