首页 > 其他分享 >vue -父子组件值传递

vue -父子组件值传递

时间:2023-07-16 14:36:36浏览次数:34  
标签:node category vue component 父子 组件 data

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

相关文章

  • vue-day21-过滤器学习
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>过滤器</title><scripttype=......
  • vue.js浏览器插件
    提取地址:链接:https://pan.baidu.com/s/1Uf9yZaQfRQ1r2JvOxXX50A?pwd=l3iw提取码:l3iw加载已解压的扩展程序  ......
  • vue-day20---收集表单数据
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>收集表单数据</title><scriptty......
  • vue2
    一.mvvm模型MVVM 是vue实现数据驱动视图和双向数据绑定的核心原理。它把每个HTML页面都拆分成了如下三个部分:View表示当前页面所渲染的DOM结构。Model表示当前页面渲染时所依赖的数据源。ViewModel表示vue的实例,它是MVVM的核心1.为什么要在vue中使用mvvm模型呢......
  • vue-day16---模拟一个数据监测
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>模拟一个数据监测你</title></head><body><scripttype="text/javascript">letdata={......
  • vue: number addition
     单页应用:(SinglePageApp,SPA)体现了其强大的优势。页面是局部刷新的,响应速度快,不需要每次加载所有的CSS/JS。前后端分离,前端(手机端)不受后端(服务器端)的开发语言的限制。Angular,React,Vue.js框架都是很好的选择。https://github.com/vuejs/awesome-vue <!DOCTYPEhtml><......
  • 【技术积累】Vue.js中的事件【一】
    Vue中的事件是什么在Vue.js中,事件是用于处理用户交互的重要机制。Vue.js提供了一系列的事件处理方法和指令,使开发者能够方便地处理用户的各种操作。1.事件绑定:Vue.js通过v-on指令来绑定事件。可以在HTML标签上使用v-on指令来监听特定的事件,并在触发事件时执行相应的方法。例如,......
  • Vue安装
    安装vue及脚手架1.安装vue.jsnpminstallvue-g或者cnpminstallvue-g查看安装的vue信息:npminfovue或者cnpminfovue2.安装webpack模板安装webpacknpminstallwebpack-g安装webpack-cli:npminstall--globalwebpack-cli安装成功后可使用webpack-v查看......
  • vue--day16---列表排序
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>watch与computed实现列表过滤</title>......
  • vue-day16---watch与computed实现列表过滤
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>watch与computed实现列表过滤</title>......