元件之全域性區域性註冊父元件子元件
阿新 • • 發佈：2018-11-14
元件之全域性區域性註冊父元件子元件
2018年04月17日 10:18:46 更好的自己520 閱讀數：248 標籤： 擴充套件 更多
個人分類： vuejs框架學習
元件可以擴充套件HTML元素，封裝可重用的HTML程式碼，我們可以將元件看作自定義的HTML元素，元件系統提供了一種抽象，讓我們可以使用獨立可複用的小元件來構建大型應用。
全域性註冊
<!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue例項掛載的元素，應該在掛載元素範圍內使用元件--> <the-component></the-component> </div> </body> <script src="js/vue.js"></script> <script> // 1.建立一個元件構造器 var myComponent = Vue.extend({ template: '<div> my first component!</div>' }) // 2.註冊元件，並指定元件的標籤，元件的HTML標籤為<the-component> Vue.component('the-component', myComponent) new Vue({ el: '#app' }); </script> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
分析：
1：Vue.extend()是Vue構造器的擴充套件，呼叫Vue.extend()構建的是一個元件構造器，而不是一個具體的元件例項，它裡面的選項物件的template屬性用於定義元件要渲染的HTML。
2：Vue.component()註冊元件時，需要提供2個引數，第一個引數是元件的標籤，第二個是元件構造器，它呼叫了元件構造器myCononent，建立一個元件例項
3：元件應該掛載在某個Vue例項下
new Vue({
el: '#app'
})- 1
- 2
- 3
這段程式碼必須要有，表示掛載在#app元素上，否則不會生效。
區域性註冊
<script> // 1.建立一個元件構造器 var myComponent = Vue.extend({ template: '<div> my first2 component!</div>' }) new Vue({ el: '#app', components: { // 2. 將myComponent元件註冊到Vue例項下 'the-component' : myComponent } }); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
父元件和子元件：可以在元件中定義並使用其他元件，構造父子元件關係
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- 子元件模板 -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父元件模板 -->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<child></child>
</div>
</body>
<script src="http://cdn.bootcss.com/vue/1.0.0-csp/vue.js"></script>
<script>
// 註冊子元件
// 將當前訊息派發出去
Vue.component('child', {
template: '#child-template',
data: function () {
return { msg: 'hello' }
},
methods: {
notify: function () {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg)
this.msg = ''
}
}
}
})
// 初始化父元件
// 將收到訊息時將事件推入一個數組
var parent = new Vue({
el: '#events-example',
data: {
messages: []
},
// 在建立例項時 `events` 選項簡單地呼叫 `$on`
events: {
'child-msg': function (msg) {
// 事件回撥內的 `this` 自動繫結到註冊它的例項上
this.messages.push(msg)
}
}
})
</script>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55