Vue實例內的Vue實例

Question

Sup人！

我這裏得到這個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-cli創建一個webpack初學者應用程序。 vue init app --webpack

然後，嘗試以這種方式構建組件。瞭解更多：https://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 
 
    } 
 
})

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

這是ComponentTwo.vue

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

 

 
<script> 
 
export default { 
 

 
} 
 
</script>

Answer 2

但是，當我做一些內聯材料，例如象{{ 3 + 3}}，它得到它應該像計算。所以Vue知道有什麼。

因爲您有父實例'componentOne'。它爲這個模板激活了Vue。如果您需要在其中設置另一個實例，則必須分隔部分模板。例子（它可以滯後於片段！）。 替代

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

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

 

 
// componentTwo.js 
 
new Vue({ 
 
    el: '[data-init="component-two"]', 
 
    data: { 
 
    \t text: 'second' 
 
    }, 
 
    template: `<button @click="doSomething($event)">{{text}}</button>`, 
 
    methods: { 
 
    doSomething: function(event) { 
 
    \t 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 3

的問題是，你必須要嵌套兩個彼此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 4

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

內部組件的兩個按鈕元件作爲在Vue的時隙被引用。 對@click指令值的評估發生在父組件（組件-1，哪個主組件-2）中。因此，您需要在那裏聲明點擊處理程序（通過組件1）。

如果您希望處理程序在component-two內處理，您應該爲其（component-two）模板中的slot元素聲明click指令，並將處理函數作爲pop來傳遞。

祝你好運。