Vue 組件與復用
阿新 • • 發佈:2017-12-18
++ font tab cli div cti rip http 數據共享
(1)全局註冊
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>
<body>
<div id="app">
<my-component>
</my-component>
</ div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前註冊
Vue.component(‘my-component‘, {
//DOM結構必須被元素包含
template: ‘<div>組件內容</div>‘
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
(2)局部註冊
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>
< body>
<div id="app">
<my-component>
</my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var Child = {
template: ‘<div>組件內容</div>‘
}
new Vue({
el: "#app",
components: {
‘my-component‘: Child
}
})
</script>
</body>
</html>
(3)is掛載組件
table、ul、ol、select這些標簽會限制其內的元素,這時可以使用is來掛載組件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>
<body>
<div id="app">
<table>
<tbody is=‘my-component‘>
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前註冊
Vue.component(‘my-component‘, {
//DOM結構必須被元素包含
template: ‘<div>組件內容</div>‘
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
(4)組件也可以有data,method,computed等屬性。但是data是函數,數據需要return出去。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前註冊
Vue.component(‘my-component‘, {
//DOM結構必須被元素包含
template: ‘<div>{{message}}</div>‘,
data: function() {
return {
message: ‘組件內容‘
}
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
(5)解決多個組件之間數據共享問題
給組件返回一個新的data對象
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前註冊
Vue.component(‘my-component‘, {
//DOM結構必須被元素包含
template: ‘<button @click="counter++">{{counter}}</button>‘,
data: function() {
return {
counter: 0
}
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
Vue 組件與復用