vue 父子组件传值,子组件改变子组件的值(通过传回父组件,再从父组件传值给子组件)

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. 这样就可以了呢

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页