Vue实例中的Vue实例

Question

苏人!

我在这里得到了这个HTML代码:

// index.html
<div data-init="component-one">
  <...>

 <div data-init="component-two">
   <button @click="doSomething($event)">
 </div>
</div>

如果我正确地理解了一切,这基本上引用了另一个Vue实例中的Vue实例.相应的JS代码分为两个文件,如下所示:

// componentOne.js
new Vue(
  el: '[data-init="component-one"]',
  data: {...},
  methods: {...}
);


// componentTwo.js
new Vue(
  el: '[data-init="component-two"]'
  data: {...}
  methods: {
    doSomething: function(event) {...}
  }
);

现在,问题在于doSomething,componentTwo永远不会被调用.

但是当我做一些内联的东西时,{{ 3 + 3 }}就像它应该计算一样.所以Vue知道有什么东西.它还会删除@click页面加载时的元素.

我也试着摆弄inline-template,但它并没有真正起作用,因为在这种情况下我会期待它.而且我认为它不适用于这种情况,所以我再次放弃了它.

这里的正确方法是什么？我怎样才能使这项工作成为现在最简单的方法？

我们使用的Vue版本是2.1.8.

干杯!

Answer 1

问题是你有两个相互嵌套的vue实例.如果元素是嵌套的,那么您应该使用相同的实例或尝试components

https://jsfiddle.net/p16y2g16/1/

 // componentTwo.js
var item = Vue.component('item',({
name:'item',
 template:'<button @click="doSomething($event)">{{ message2 }}        </button>',
 data: function(){
   return{ 
  message2: 'ddddddddddd!'
}},
methods: {
doSomething: function(event) {alert('s')}
}
 }));
  var app = new Vue({
    el: '[data-init="component-one"]',
   data: {
 message: 'Hello Vue!'
    }
   });

   <div data-init="component-one">
  <button >{{ message }}</button>

    <item></item>

    </div>

如果sepatate实例彼此独立,则它们可以正常工作.

如下:

https://jsfiddle.net/p16y2g16/

 var app = new Vue({
 el: '[data-init="component-one"]',
 data: {
  message: 'Hello Vue!'
  }
});


 // componentTwo.js
 var ddd = new Vue({
  el: '[data-init="component-two"]',
   data: {
     message: 'ddddddddddd!'
},
 methods: {
   doSomething: function(event) {alert('s')}
 } 
});

Answer 2

但是当我做一些内联的东西时，例如{{3 + 3}}，它会像应该的那样被计算。所以Vue知道有什么。

因为您有父实例“ componentOne”。它为此模板激活了Vue。如果需要在内部设置另一个实例，则必须分开模板的一部分。示例（可能会滞后于代码段！）。另类

https://jsfiddle.net/qh8a8ebg/2/

https://jsfiddle.net/qh8a8ebg/2/

// componentOne.js
new Vue({
  el: '[data-init="component-one"]',
  data: {
  	text: 'first'
  },
  methods: {}
});


// componentTwo.js
new Vue({
  el: '[data-init="component-two"]',
  data: {
  	text: 'second'
  },
  template: `<button @click="doSomething($event)">{{text}}</button>`,
  methods: {
    doSomething: function(event) {
    	console.log(event);
    }
  }
});

Answer 3

使用 vue-cli 创建 webpack 入门应用程序。vue init app --webpack

然后，尝试以这种方式构建组件。了解更多：https ://v2.vuejs.org/v2/guide/components.html#What-are-Components

1. 这是main.js

import Vue from 'vue'
import ComponentOne from './ComponentOne.vue'
import ComponentTwo from './ComponentTwo.vue'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { 
    ComponentOne,
    ComponentTwo
  }
})

2. 这是 ComponentOne.vue

<template>
  <div class="user">
    <div v-for="user in users">
      <p>Username: {{ user.username }}</p>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      users: [
        {username: 'Bryan'},
        {username: 'Gwen'},
        {username: 'Gabriel'}
      ]
    }
  }
}
</script>

3. 这是 ComponentTwo.vue

<template>
  <div class="two">
    Hello World
  </div>
</template>


<script>
export default {

}
</script>