Как сохранить данные в компоненте при использовании V-с в Vue JS

Question

Так вот моя проблема:

Я хочу, чтобы сделать компонент, который принимает это значение от V-с = «значениями», и добавить их к моему после некоторой модификации, затем отобразите эти измененные свойства.

Но, насколько я понимаю, когда я устанавливаю значения с помощью «v-with», данные компонента стираются, поэтому связь между данными моего компонента (а не v-с одним) и моими директивами теряется.

Я действительно новичок в этой структуре, я не вижу никакого решения, поэтому, думаю, пришло время задать свой первый вопрос здесь!

Вот HTML:

<script type="text/x-template" id="my-template"> 
    <p v-on="click:reloadParentMsg">Msg parent : {{ParentMsg}}</p> 
    <p v-on="click:reloadChildMsg">Msg child : {{ChildMsg}}</p> 
</script> 

<div id="myVue"> 
    <my-component v-with="ParentData" ></my-component> 
</div> 

А вот Javascript:

Vue.component('my-component', { 
    template: '#my-template', 
    data: function() { 
     return { 
      ChildMsg: "wololo" 
     } 
    }, 
    methods:{ 
     reloadParentMsg : function(){ 
      this.ParentMsg="Parent"; 
      console.log(this.ParentMsg); 
     }, 
     reloadChildMsg : function(){ 
      this.ChildMsg="Child"; 
      console.log(this.ChildMsg); 
     } 
    } 
}) 

var myVue = new Vue({ 
    el: '#myVue', 
    data: { 
     ParentData:{ParentMsg: "gloubiboulga"} 
    } 
}) 

И скрипку JS http://jsfiddle.net/KwakawK/hfj1tv4n/3/

Answer 1

Я не совсем ясно, на что вы пытаетесь но я считаю, что это можно решить, используя вторую форму v-with, которая составляет v-with="childProp: parentProp". Вместо родительского свойства, переопределяющего все дочерние данные, это заменит только свойство слева от двоеточия.

Так что я думаю, что ваш код может быть исправлена ​​путем изменения V-с этого:

<my-component v-with="ParentMsg: ParentData.ParentMsg" ></my-component>

Вот обновленный код в качестве сниппета:

// register the grid component 
 
Vue.component('my-component', { 
 
    template: '#my-template', 
 
    data: function() { 
 
    return { 
 
     ChildMsg: "wololo" 
 
    } 
 
    }, 
 
    methods:{ 
 
     reloadParentMsg : function(){ 
 
      this.ParentMsg="Parent"; 
 
      console.log(this.ParentMsg); 
 
     }, 
 
     reloadChildMsg : function(){ 
 
      this.ChildMsg="Child"; 
 
      console.log(this.ChildMsg); 
 
     } 
 
    } 
 
}) 
 

 
// bootstrap the demo 
 
var myVue = new Vue({ 
 
    el: '#myVue', 
 
    data: { 
 
     ParentData:{ParentMsg: "gloubiboulga"} 
 
    } 
 
})

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script> 
 
<script type="text/x-template" id="my-template"> 
 
    <p v-on="click:reloadParentMsg">Msg parent : {{ParentMsg}}</p> 
 
    <p v-on="click:reloadChildMsg">Msg child : {{ChildMsg}}</p> 
 
</script> 
 

 
<div id="myVue"> 
 
    <my-component v-with="ParentMsg: ParentData.ParentMsg" ></my-component> 
 
</div>

Для получения дополнительной информации см. Vue guide.