美文网首页
vue的父子组件传值

vue的父子组件传值

作者: 舒尔诚 | 来源:发表于2022-03-02 21:48 被阅读0次

1. 子组件editTree向父组件传:调用父组件的方法createClick,data为参数

this.$emit("createClick",data)  
父组件中代码:
同时组件标签添加@
        <edit-tree ref="editTree" @createClick="createClick"  >
    1)输出一个参数
    子组件:
    this.$emit('closeChange',false);
    父组件:
        <posilCom @closeChange="closeCom($event)"></posilCom>
        closeCom(msg) {
            this.msg = msg;
        }
    2)输出多个参数,使用arguments定义接收
    子组件:
        this.$emit('closeChange',false,true);
    父组件:
        <posilCom @closeChange="closeCom(arguments)"></posilCom>
        closeCom(msg) {
            this.a= msg[0];
            this.b= msg[1];
        }

2.父组件向子组件customizeTree.vue传值:子组件使用props接收

子组件中代码:
        export default {
             props: {
                activeId: {
                  type: Number
                },
                treeData: {
                  type: Array
                },
                level: {
                  type: Number
                }
              }
          }
父组件中:
       <customize-tree :tree-data="treeData"></customize-tree>
   注意:父组件通过prop传的值,子组件不能修改

相关文章

  • (VUE3) 四、组件传值(父子组件传值 & 祖孙组件传值 &v

    1.父子组件传值 vue2中的父子组件传值:父组件: 子组件: vue3中的父子组件传值: 还是用props接收父...

  • Vue父子组件通信和双向绑定

    本篇文章主要介绍父子组件传值,组件的数据双向绑定。 1. 基础父子组件传值 父子组件传值,这是Vue组件传值最常见...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • Vue组件之间的传值

    Vue父子组件之间的传值(props)兄弟组件 VUEX

  • 组件通信

    vue传值可分为父子之间传值、兄弟组件之间传值、跨代组件之间传值 1.父子之间传值:可以使用$emit/props...

  • 前端基础搬运工-VUE模块

    十、VUE模块 基础部分 1. Vue组件间传值 答: -[ ] 1.父子之间的传值 父组件向子组件传值通过p...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • VUE03

    Vue组件 组件的创建 组件的指令以及事件绑定 父子组件创建 父子组件通信 兄弟组件的传值 动态组件

  • vue2.0的三种常用传值方式,并且如何实现?

    vue2.0 组件传值方式有三种:父组件向子组件传值,子组件向父组件传值,非父子组件传值 : 父传子: 首先现在父...

网友评论

      本文标题:vue的父子组件传值

      本文链接:https://www.haomeiwen.com/subject/dsberrtx.html