javascript - 在 Vue js 中使用 v-with 时如何将数据保存在组件中

Question

所以这是我的问题:

我想制作一个从 v-with="values"中获取值的组件，并在进行一些修改后将它们添加到我的组件模型中，然后显示那些修改后的属性。

但据我所知，当我使用“v-with”设置值时，组件数据将被删除，因此我的组件数据(不是 v-with 数据)与我的指令之间的绑定(bind)将丢失。

我真的是这个框架的新手，我没有看到任何解决方案，所以我想是时候在这里问我的第一个问题了!

这是 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 fiddle http://jsfiddle.net/KwakawK/hfj1tv4n/3/

Answer 1

我不太清楚你想做什么，但我相信可以通过使用 v-with 的第二种形式来解决。 ，即 v-with="childProp: parentProp" .父属性不会覆盖所有子数据，而只会替换冒号左侧的属性。

所以我认为您的代码可以通过将 v-with 更改为此来修复:

<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获取更多信息。