Question

所以这是我的问题：

我想制作一个从v-with =＆＃34;值＆＃34;中获取值的组件。并在修改后将它们添加到我的组件模型中，然后显示这些修改后的属性。

但根据我的理解，当我使用＆＃34; v-with＆＃34;设置值时，组件数据将被删除，因此我的组件数据（不是v-one）和我的指令之间的绑定将丢失。 / p>

我对这个框架很陌生，我没有看到任何解决方案，所以我想是时候在这里问我的第一个问题了！

这是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"。<my-component v-with="ParentMsg: ParentData.ParentMsg" ></my-component>。而不是覆盖所有子数据的父属性，这将只替换冒号左侧的属性。

所以我认为你的代码可以通过改变v-with来修复：

// 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>

{{1}}

有关详细信息，请参阅Vue guide。

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

1 个答案: