Vue instance inside a Vue instance

Question

Sup people!

I got this HTML code here:

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

This basically refers to the Vue instance inside another Vue instance, if I got it right. The corresponding JS code is split into two files and looks like this:

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

Now the problem is that doSomething from componentTwo never called.

But when I do some built-in things, like {{ 3 + 3 }} , it computes as it should. So Vue knows there is something. And it also removes the @click element when the page loads.

I tried to work with inline-template , but this does not work, as I expected, in this situation. And I figured it was not meant for this occasion, so I threw it again.

What would be the right approach? And how can I make this work the easiest way with how it is set up right now?

The version used by Vue is 2.1.8 .

Hurrah!

Answer 1

But when I do some built-in things, like {{3 + 3}}, it computes as it should. So Vue knows there is something.

Since you have a parent instance of 'componentOne'. He activated Vue for this template. If you need to install another instance inside, you need to separate part of the template. Example (it may lag behind the fragment!). Alternative

 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> 

Answer 2

The problem is that you have two vue instances nested within each other. If elements are nested, then you must use the same instance or try 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 instances work if they are independent of each other.

in the following way:

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 3

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

Answer 4

The button element inside component-2 is referred to as a slot in Vue. The value of the @click directive is evaluated in the parent component (component-one, component of the host-two). To do this, you need to declare a click handler there (above component one).

If you want the handler to be processed inside component-two, you must declare the click directive for the slot element in it (component-two) and pass the function to the handler, for example, as a pop.

good luck.

Answer 5

Use vue-cli to create an application to launch webpack. vue init app --webpack

Then try to structure your components this way. More details: https://vuejs.org/v2/guide/components.html#What-are-Components

• This is 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. This is 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. This is ComponentTwo.vue

 <template> <div class="two"> Hello World </div> </template> <script> export default { } </script>