Vue.js - односторонняя привязка данных, обновление родительского элемента от дочернего

1

Учитывая, что двоеточие указывает одностороннюю привязку данных в VueJS2, я хотел бы понять, почему в этом примере ребенок может обновить массив, который был объявлен в родительском элементе и передан потомку через опору (односторонний).

https://jsfiddle.net/ecgxykrt/

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <span>Parent value: {{ dataTest }}</span>
    <test :datatest="dataTest" />
</div>

var test = {
    props: ['datatest'],
    mounted: function() {
        this.datatest.push(10)
    },
    render: function() {}
}

new Vue({
    el: '#app',
    components: {
        'test': test
    },
    data: function() {
        return {
            dataTest: []
        }
    }
})

Заранее спасибо!

  • 0
    Я довольно заинтересован в ответе, так как ответы, таким образом, честные, не делают ничего, чтобы объяснить это. И vue прямо заявляют, что это односторонняя привязка, и вы должны даже получить предупреждение, когда изменяете опору напрямую.
  • 1
    @Stephan-v Stephan-v Объекты и массивы передаются по ссылке. Вы можете изменить их так же, как вы можете изменить значение const . То, что вы не можете сделать, это заменить реквизит на совершенно новый объект или массив.
Теги:
vue.js
vuejs2

3 ответа

0
Лучший ответ

Если бы вы этого захотели, вы могли бы избежать этого, создав мелкую копию и присвоив ее новому элементу данных в дочернем элементе.

https://jsfiddle.net/6xxba1fz/

var test = {
  props: ['test'],
  data: function() {
  return {
    myTest: this.test.slice()
  }
  },
  mounted: function() {
    this.myTest.push(10)
  },
  render: function() {}
}

new Vue({
  el: '#app',
  components: {
    'test': test
  },
  data: function() {
    return {
      dataTest: []
    }
  }
})
Поделиться
  • 0
    Если я хочу создать поверхностную копию объекта вместо массива, нужно ли мне использовать внешнюю библиотеку для создания глубокой копии?
  • 0
    Если я использую Lodash для клонирования наблюдаемого объекта vuejs, ссылки будут одинаковыми даже в клоне, так что это не решит мою проблему = (. В этом случае, что мне нужно делать?
Показать ещё 1 комментарий
1

Vue запрещает вам назначать опору. Это не мешает вам вызывать методы prop или изменять его элементы или элементы, любые из которых могут изменять содержимое объекта. Ни одна из этих вещей не изменяет ценность самого опоры, которая является ссылкой на базовую структуру.

Связанная с этим проблема заключается в том, что Vue не может обнаруживать изменения в элементах Array или добавлениях/удалениях членов Object.

Больше здесь.

Поделиться
  • 0
    Как это объясняет, почему ребенок может обновить родительские данные?
  • 0
    Эти предостережения также являются чем-то совершенно иным, поскольку сама длина не изменяется напрямую, а элемент уже был установлен заранее. В соответствии с этим push также должен отслеживаться должным образом. vuejs.org/v2/guide/list.html#Mutation-Methods
Показать ещё 3 комментария
-2

Пожалуйста, избегайте использования какого-либо имени для ключа и значения

: datatest = "dataTest" Неправильный путь

: data-test = "dataTest" Лучший способ (используйте случай Kabab)

HTML

<div id="app">
  <span>Parent value: {{ dataTest }}</span>
  <test :data-test="dataTest" />
</div>

JS

var test = {
  props: {
        dataTest:{
        type:Number
      }
  },
  mounted: function() {
    this.datatest.push(10)
  },
  render: function() {}
}

new Vue({
  el: '#app',
  components: {
    'test': test
  },
  data: function() {
    return {
      dataTest: []
    }
  }
})

Результат:

Родительское значение: []

Поделиться
  • 0
    Вы подталкиваете к datatest вместо dataTest . Если вы проверите свою консоль, это приведет к ошибке, и вы, конечно, оставите пустой массив.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню