Vuejs——（13）組件——雜項

時間 2019-11-08

標籤 vuejs 組件雜項简体版

原文原文鏈接

目錄(?)[+]vue

本篇資料來於官方文檔：webpack

http://cn.vuejs.org/guide/components.html#u6742_u9879
web

本文是在官方文檔的基礎上，更加細緻的說明，代碼更多更全。ajax

簡單來講，更適合新手閱讀數組

（三十）組件——雜項服務器

①組件和v-for

簡單來講，就是組件被屢次複用；app

例如表格裏的某一行，又例如電商的商品櫥窗展現（單個櫥窗），均可以成爲能夠被複用的組件；異步

只要編寫其中一個做爲組件，而後使數據來源成爲一個數組（或對象，但我的以爲最好是數組），經過v-for的遍歷，組件的每一個實例，均可以獲取這個數組中的一項，從而生成所有的組件。ide

而數據傳輸，因爲複用，因此須要使用props，將遍歷結果i，和props綁定的數據綁定起來，綁定方法同普通的形式，在模板中綁定。

示例代碼：

[html] view plain copy

<div id="app">
<button @click="toknowchildren">點擊讓子組件顯示</button>
<table>
<tr>
<td>索引</td>
<td>ID</td>
<td>說明</td>
</tr>
<tr is="the-tr" v-for="i in items" v-bind:id="i" :index="$index"></tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4]
},
methods: {
toknowchildren: function () { //切換組件顯示
console.log(this.$children);
}
},
components: {
theTr: { //第一個子組件
template: "<tr>" +
"<td>{{index}}</td>" +
"<td>{{id}}</td>" +
"<td>這裏是子組件</td>" +
"</tr>",
props: ['id','index']
}
}
});
</script>

說明：

【1】記得將要傳遞的數據放在props裏！

【2】將index和索引$index綁定起來，由於索引從0開始，所以索引所在列是從0開始；id是和遍歷items的i綁定在一塊兒的，所以id從1開始。

【3】能夠在父組件中，經過this.$children來獲取子組件（可是比較麻煩，特別是組件多的時候，比較難定位）；

②編寫可複用的組件：

簡單來講，一次性組件（只用在這裏，不會被複用的）跟其餘組件緊密耦合是能夠的，可是，可複用的組件應當定義一個清晰的公開接口。（否則別人怎麼用？）

可複用的組件，基本都是要和外部交互的，而一個組件和外部公開的交互接口有：

【1】props：容許外部環境數據傳遞給組件；

【2】事件：容許組件觸發外部環境的action，就是說經過在掛載點添加v-on指令，讓子組件的events觸發時，同時觸發父組件的methods；

【3】slot：分發，容許將父組件的內容插入到子組件的視圖結構中。

如代碼：

[html] view plain copy

<div id="app">
<p>這是第一個父組件</p>
<widget
:the-value="test"
@some="todo">
<span>【第一個父組件插入的內容】</span>
</widget>
</div>
<div id="app2">
<p>這是第二個父組件</p>
<widget @some="todo">
</widget>
</div>
<script>
Vue.component("widget", {
template: "<button @click='dosomething'><slot></slot>這是一個複用的組件，點擊他{{theValue}}</button>",
methods: {
dosomething: function () {
this.$emit("some");
}
},
events: {
some: function () {
console.log("widget click");
}
},
props: ['theValue']
})
var vm = new Vue({
el: '#app',
data: {
test: "test"
},
methods: {
todo: function () {
console.log("這是第一個父組件")
}
}
});
var vm_other = new Vue({
el: '#app2',
data: {
name: "first"
},
methods: {
todo: function () {
console.log("這是另一個父組件")
}
}
});
</script>

說明：

【1】在第一個父組件中使用了分發slot，使用了props來傳遞值（將test的值傳到子組件的theValue之中）；

【2】在兩個組件中，子組件在點擊後，調用methods裏的dosomething方法，而後執行了events裏的some事件。又經過掛載點的@some=」todo」，將子組件的some事件和父組件的todo方法綁定在一塊兒。

所以，點擊子組件後，最終會執行父組件的todo方法。

【3】更改父組件中，被傳遞到子組件的值，會同步更改子組件的值（即兩者會數據綁定）；

③異步組件：

按照個人理解，簡單來講，一個大型應用，他有多個組件，但有些組件無需當即加載，所以被分拆成多個組件（好比說須要當即加載的，不須要當即加載的）；

須要當即加載的，顯然放在同一個文件中比較好（或者同一批一塊兒請求）；

而不須要當即加載的，能夠放在其餘文件中，但須要的時候，再ajax向服務器請求；

這些後續請求的呢，就是異步組件；

作到這種異步功能的，就是Vue.js的功能——容許將組件定義爲一個工廠函數，動態解析組件的定義。

能夠配合webpack使用。

至於如何具體使用，我還不太明白，教程中寫的不清，先擱置等須要的時候來研究。

連接：

http://cn.vuejs.org/guide/components.html#u5F02_u6B65_u7EC4_u4EF6

④資源命名的約定：

簡單來講，html標籤（好比div和DIV是同樣的）和特性（好比要寫成v-on這樣的指令而不是vOn）是不區分大小寫的。

而資源名每每是寫成駝峯式（好比camelCase駝峯式），或者單詞首字母都大寫的形式（好比PascalCase，我不知道該怎麼稱呼這個，不過這樣寫不多的說）。

Vue.component("myTemplate", {
//......略
})

Vue.js能夠自動識別這個並轉換，

<my-template></my-template>

以上那個模板能夠自動替換這個標籤。

⑤遞歸組件：

簡單來講，遞歸組件就是組件在本身裏內嵌本身的模板。

組件想要遞歸，須要name屬性，而Vue.component自帶name屬性。

大概樣子是這樣的，

[html] view plain copy

<div id="app">
<my-template></my-template>
</div>
<script>
Vue.component("myTemplate", {
template: "<p><my-template></my-template></p>"
})

這種是無限遞歸，確定是不行的。所以，須要控制他遞歸的層數，例如經過數據來控制遞歸，當數據爲空時，則中止遞歸。

示例代碼以下：

[html] view plain copy

<ul id="app">
<li>
{{b}}
</li>
<my-template v-if="a" :a="a.a" :b="a.b"></my-template>
</ul>
<script>
Vue.component("myTemplate", {
template: '<ul><li>{{b}}</li><my-template v-if="a" :a="a.a" :b="a.b"></my-template></ul>',
props: ["a", "b"]
})
var data = {
a: {
a: {
a: 0,
b: 3
},
b: 2
},
b: 1
}
var vm = new Vue({
el: '#app',
data: data,
methods: {
todo: function () {
this.test += "!";
console.log(this.test);
}
}
});
</script>