vue進階（1） ---自定義元件
阿新 • • 發佈：2019-01-03
vue自定義元件
1、區域性元件，區域性元件必須要手動掛載，不然無法生效
2、全域性元件，全域性元件不需要手動掛載，但是不常用，儘量不要在全域性上掛載變數或者元件（可能會影響瀏覽器效能）
3、配合模板使用實現元件間的巢狀
example：區域性元件和全域性元件的使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<script src="https://unpkg.com/vue/dist/vue.js" example：配合模板自定義區域性元件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue測試2</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
*{
list-style: none;
}
</style>
</head>
<body>
<div id="example">
<!-- 元件呼叫 -->
<hello></hello>
<!-- {{title}} title is not defined -->
</div>
<!-- 編寫模板（模板在HTML頁面中會預設display：none） -->
<template id="example01">
<!-- vue2.0以後，模板內不支援多個程式碼片段，必須要有層級關係 -->
<div>
<ul>
<!-- <li>{{msg}}</li> msg is not defined -->
<li>{{title}}</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
</template>
<script type="text/javascript">
//Vue自定義元件（配合模板使用方法） 自定義的元件**預設**是不能和vue例項共享資料的
//自定義區域性元件
var Hello = {
//使用模板
template : '#example01',//選擇器
data : function(){
return {
title : 'I am son'
}
}
}
//掛載元件
var vm = new Vue({
el:'#example',
data : {
msg : " I am father"
},
components: {
'hello':Hello
}
});
</script>
</body>
</html>example：配合模板自定義區域性元件並實現元件間的巢狀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue元件間的套用 -->
<div id="example">
<!-- 父元件 -->
<parent></parent>
</div>
<!-- 定義模板 -->
<!-- 一定要注意，使用模板配合元件套用的時候，不要直接把子元件放在父元件標籤裡面，要放在模板裡，因為渲染時模板會替換標籤，所以標籤裡的內容都會被忽略的 -->
<template id="example01">
<div>
<h1>我是父元件</h1>
<!-- 子元件 -->
<child></child>
</div>
</template>
<script>
//注意順序，子元件註冊必須在父元件之前，不然無法呼叫！（JS域解析原理）
var Child = {
template : '<h2>我是子元件</h2>'
}
var Parent = {
template : '#example01',
components : {
'child':Child
}
}
var vm = new Vue({
el:'#example',
components : {
'parent': Parent
}
});
</script>
</body>
</html>