Instancia de Vue dentro de la instancia de Vue

¡Gente sup!

Tengo este código HTML aquí:

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

Esto básicamente hace reference a una instancia de Vue dentro de otra instancia de Vue si entendí todo correctamente. El código JS respectivo se divide en dos files y se ve así:

 // 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) {...} } ); 

Ahora, el problema con esto es que doSomething from componentTwo nunca se llama.

Pero cuando hago algunas cosas en línea, como {{ 3 + 3 }} , se calcula como debería. Entonces Vue sabe que hay algo. Y también elimina el elemento @click en la carga de la página.

Traté de juguetear con inline-template también, pero en realidad no funciona como esperaba en esta situación. Y pensé que no era para este caso de todos modos, así que lo dejé caer otra vez.

¿Cuál sería el enfoque correcto aquí? ¿Y cómo puedo hacer que esto funcione de la manera más fácil posible con la forma en que está configurado ahora?

La versión Vue que usamos es 2.1.8 .

¡Aclamaciones!

Pero cuando hago algunas cosas en línea, como {{3 + 3}}, se calcula como debería. Entonces Vue sabe que hay algo.

Porque tiene la instancia principal 'componentOne'. Activó Vue para esta plantilla. Si necesita establecer otra instancia dentro, debe separar parte de la plantilla. Ejemplo (¡puede retrasarse en un fragment!). Alternativa

 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); } } }); 
 <script src="https://vuejs.org/js/vue.min.js"></script> <div data-init="component-one"> {{text}} </div> <div data-init="component-two"> </div> 

El problema es que tiene dos instancias vue anidadas entre sí. Si los elementos están nesteds, entonces debes usar la misma instancia o probar los 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> 

Las instancias sepatate funcionan si son independientes entre sí.

como sigue:

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')} } }); 
 <div th:if="${msg.replyFloor}"> <div class="msg-lists-item-left"> <span class="msg-left-edit" th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">您在</span> <span th:text="${msg.topic.title}" class="msg-left-edit-res" th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">问题回答</span> <span th:text="${msg.type.name}" class="msg-left-edit " th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">帖子相关</span> <span class="msg-left-edit-number" >产生了<span th:text="${msg.unreadCount} ? : ${msg.unreadCount} + '条新' : ${msg.unreadCount} + '条' " th:class="${msg.unreadCount} ? : 'number-inner':''">2132条</span>回复</span> </div> <div class="msg-lists-item-right"> <span th:text="${msg.lastShowTime}">2017-8-10</span> </div> </div> 

El elemento del button dentro del componente dos se denomina ranura en Vue. La evaluación del valor de la directiva @click ocurre en el componente padre (componente uno, componente host dos). Por lo tanto, debe declarar el controller de clic allí (sobre el componente uno).

Si desea que el manejador se maneje dentro del componente dos, debe declarar una directiva de clic para el elemento de ranura en su plantilla (componente dos), y pasar la function de controller, por ejemplo, como pop.

buena suerte.

Use vue-cli para crear una aplicación de inicio de webpack. vue init app --webpack

Luego, intente estructurar sus componentes de esta manera. Leer más: https://vuejs.org/v2/guide/components.html#What-are-Components

  1. Esto es 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 } })