vue -父子组件值传递

父组件：是指引用其他组件东西（这里叫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>


// 最后通过自定义方法就能够获取到子组件传递的值了