Skip to content

动态props传递数组默认是双向绑定? #2863

@Astlvk

Description

@Astlvk

父组件传给子组件数组的时候,发现在没有使用.sync的情况下,子组件修改此数组会同步到父组件。
不论是普通数组还是对象数组,子组件内对传递下来的数组的增删改操作都会同步到父组件的数组。
issues基本都是英文的,搜索后也不好确定有没有相关问题,因此这里反馈下。

以下代码可复制到 https://jsfiddle.net/yyx990803/okv0rgrk/ 测试

html

<div id="app">
    {{ message }}//{{strs | json}}
    <child :strs="strs"></child>
    <child2 :strs="strs"></child2>
</div>

javascript

var c = Vue.extend({
    template: '<div><h1>{{msg}}</h1></div>' + 
              '<div v-for="str of strs">' + 
              '<input v-model="str"/>' + 
              '<button @click="del(str)">del</button>' +
              '</div>',
    props: ['strs'],
  data: function () {
    return {
        msg: 'child'
    }
  },
  methods: {
    del: function (item) {
        this.strs.$remove(item);
    }
  }
});

var c2 = Vue.extend({
    template: '<div><h1>{{msg}}</h1></div>' + 
              '<div v-for="str of strs"><input v-model="str"/></div>',
    props: ['strs'],
  data: function () {
    return {
        msg: 'child2'
    }
  }
});

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!',
        str: 'string',
        strs: ['a','s','d','f'],
        objs: [
            {name: 'a'},{name: 'b'},{name: 'c'},{name: 'd'}
        ]
    },
    components: {
        child: c, child2: c2
    }
})

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions