vue 父子组件传值，子组件改变子组件的值（通过传回父组件，再从父组件传值给子组件）

最新推荐文章于 2024-07-23 14:29:05 发布

wu_223

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量1.9k

点赞数 3

分类专栏： iview 前端问题 vue 文章标签： vue父子组件传值 vue 子组件改变子组件的值 vue动态改变子组件的值

本文链接：https://blog.csdn.net/qq_34790644/article/details/110196881

版权

前端问题同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

iview

2 篇文章 0 订阅

订阅专栏

1. 父组件调用代码：

其中menuData是传递给子组件的值，name对应的方法是子组件传过来的

<Left :mData="menuData" @name="nameChange($event)" />

js中

  data() {
    return {
      leftFlag: false,
      menuData: [{
        title:'修改前'
      },{
        title:'修改前1'
      }],
    };
  },
  methods: {
    //子组件传值过来后重新给menuData赋值
    nameChange(event, num) {
      this.menuData = [{
       title:'修改后'
      },
      {
       title:'修改后1'
      }];
    }
  },
  components: {
    Left,
  },

2. 子组件代码：

本组件用到iview UI框架，mData也就是父组件传过来的值， changeLeft方法就是子组件改变后触发父组件的逻辑

      <div class="input">
        <Input search v-model="name" @on-enter="changeLeft()" />
      </div>
      <div class="tree">
        <Tree :data="mData"></Tree>
      </div>

js代码如下：

 data() {
    return {
      name:"",
    };
  },
  props: ["mData"],
  methods: {
    changeLeft() {
        this.$emit("name",this.name);
    },
 },

3. 这样就可以了呢