如何交换内容答案

【问题标题】：How do I swap content如何交换内容
【发布时间】：2016-04-27 23:45:31
【问题描述】：

如何使用 Vue.js 交换 div 的内容？我认为我缺乏一般的生命周期知识。这是我到目前为止所得到的。毕竟我需要在两个 Vue 实例之间进行交换，并且只想为它们使用一个灯箱容器。

这是我目前所得到的：http://jsbin.com/qokerah/edit?html,js,output

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>  
</head>
<body>

  <script type="x-template" id="foo-template">
    <div class="text">{{ fooText }}</div>
    <div class="confirm" v-if="fooConfirm">confirmed</div>
  </script>

  <script type="x-template" id="bar-template">
    <div class="heading">{{ barHeading }}</div>
    <div class="info">{{ barInfo }}</div>
  </script>

  <div class="foo">
    <div class="btn btn-primary" v-on:click="swapLightboxContent">Open foo template</div>
  </div>

  <div class="bar">
    <div class="btn btn-primary" v-on:click="swapLightboxContent">Open bar template</div>
  </div>

  <div class="lightbox">
    <div class="lightbox-content">Show foo- or bar-template</div>
  </div>

</body>
</html>

var foo = new Vue({
  el: '.foo',
  data: {
    fooText: 'text',
    fooConfirm: false
  },
  methods: {
    swapLightboxContent: function () {
      console.log('Show foo-template');
    }
  }
});

var bar = new Vue({
  el: '.bar',
  data: {
    barHeading: 'text',
    barInfo: 'text'
  },
  methods: {
    swapLightboxContent: function () {
      console.log('Show bar-template');
    }
  }
});

【问题讨论】：

标签： javascript html lifecycle vue.js

【解决方案1】：

好吧，我的主要误解是：

我使用 var foo 和 bar 作为新的 Vue() 实例，而没有父“交集”实例

所以现在可以工作了：

http://jsbin.com/tiwoco/edit?html,js,output

仍然需要弄清楚是否不应该在 foo 和 bar 组件中通过 vmFoo 和 vmBar 实例访问 currentView 项目:)

【讨论】：

您可以使用<component :is="currentView" :foo="bar" :a="b" :current-view="currentView"></component>将任何属性传递给您的子实例