Question

我在一个div中有我的输入字段，在另一个div中有标签（作为我的应用程序中的侧边栏）。我要在边栏中更新标签，因为我在第一格上输入了内容。

如果那样的话，我很乐意创建第二个div组件。我在网上阅读，据说我们可以使用道具将数据传递到组件。但是我无法将输入字段链接到组件。请找到我的代码如下：

var app = new Vue({
  el: '#div1',
  data: {
    message: ''
  }
})

Vue.component('testp', {
  props: ['message'],
  template: '<p>Message is: {{ message }}</p>'
})

var div2 = new Vue({
   el: '#div2'
});

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div1">
	<input v-model="message" placeholder="edit me">

</div>

<div id="div2">
	<testp></testp>
</div>


</body>
</html>

Answer 1

就像我在评论中指出的那样，没有理由让您使用两个单独的Vue实例。您所要做的只是将所有内容包装在应用程序容器中，例如<div id="#app">，然后在该元素上实例化您的VueJS实例。

然后，您可以在v-bind:message="message"组件上使用<testp>从父级传入message。从这个意义上说，#div1和#div2完全用于标记/装饰目的，在您的代码中不用作VueJS应用容器。

Vue.component('testp', {
  props: ['message'],
  template: '<p>Message is: {{ message }}</p>'
});

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div id="div1">
    <input v-model="message" placeholder="edit me">
  </div>

  <div id="div2">
    <testp v-bind:message="message"></testp>
  </div>
</div>

Answer 2

正如评论中所指出的，您没有理由拥有两个单独的Vue实例，并且“第一答案”是正确的。但是在某些情况下，您确实需要多个Vue实例，您可以按照以下方式实际使用它们。

var app = new Vue({
  el: '#div1',
  data: {
    message: ''
  }
})

Vue.component('testp', {
  props: ['message'],
  template: '<p>Message is: {{ message }}</p>'
})

var div2 = new Vue({
   el: '#div2',
  computed: {
    newMessage() {
      return app.message;
    }
  },
});

HTML

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="div1">
        <input v-model="message" placeholder="edit me">
    </div>
    <div id="div2">
        <testp :message="newMessage"></testp>
    </div>
    </body>
    </html>

请注意，计算值newMessage实际上是从其他Vue实例（app）获取其值的，并且它也是反应性的。因此，只要第一个Vue实例中的值发生更改，它就会在另一个Vue实例中更新。

Codepen：https://codepen.io/ashwinbande/pen/xMgQQz

如何将v模型从一个div中的输入绑定到另一div或组件

2 个答案: