vue.js - vue中组件数据同步的一个问题

问题描述

问 题

http://www.vastskycc.com/dist...
项目地址

<template>
  <div id="app">
    <sidebar  :sSkils='resume.skils' @sAdd="add"></sidebar>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      resume: {
        skils: [
          {name: 'name', skil: 1},
          {name: 'name', skil: 2},
          {name: 'name', skil: 3}
        ],
      }
    }
  },
  methods: {
    add: function (vl, type) {
      this.resume[type].push(vl)
    }
  },

}
</script>

<template>
  <div class="sidebar" id="sidebar">
    <div class="s-skils" v-for="(item, index) in sSkils">
      <div class="s-skils-box">
        <el-input v-model="item.name" class='s-skils-title'></el-input>
        <el-rate v-model="item.skil" class='s-skils-rate'></el-rate>
        <el-button type="primary" @click="sDel(index,'skils')">删除</el-button>
      </div>
    </div>
    //添加
    <el-input class='s-skils-title' v-model='addValue.name'></el-input>
    <el-input class='s-skils-title' v-model='addValue.skil'></el-input>
    <el-button type="primary" icon="plus" @click="sAdd(addValue, 'skils')">添加</el-button>
    
  </div>
</template>

<script>
export default {
  name: 'sidebar',
  props: ['sSkils'],
  data () {
    return {
      addValue: {
        name: '',
        skil: ''
      }
    }
  },
  methods: {
    sAdd: function (vl, type) {
      this.$emit('sAdd', vl, type)
    }
  }
}
</script>

代码大概如上，问题是我在子组件里通过sAdd方法给父组件resume.skils添加了值，子组件接着也for出来了新数据，可是这个新添加的值好像还是绑定在子组件的addValue上，修改addValue会把for出来的新值改掉。。
想问下各位大大，这该如何是好？

解决方案

因为 addValue 还是引用的还是那个子组件的 model，子组件的 sAdd 方法里边 $emit 时传递一个新的对象就可以。如：

sAdd(vl, type) {
  this.$emit({ name: vl.name, skil: vl.skil }, type);
}

建议，变量名最好写全，vl => value，不差这几个字符，看代码的人会舒服很多。

这篇关于vue.js - vue中组件数据同步的一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！