vue2.0的組件

原創

2020-02-20 17:06

組件在項目中是經常會用到的,它可以是全局註冊的組件以及局部註冊的組件,我們分別來看不同的組件

1>全局註冊的組件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript"
src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<test></test>
<test></test>
</div>
<script type="text/javascript">
//註冊全局組件
Vue.component('test',{
template:'<div>全局註冊的組件</div>'
})
var app=new
Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>

需要注意的是1:全局註冊的component後面是沒有s的;1:它可以多個地方使用它

組件的強大之處是可以和模板聯合使用,以一個例子來說明:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript"
src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<test></test>
<test></test>
</div>
<template id="template">
<div>全局註冊的組件和模板聯合使用</div>
</template>
<script type="text/javascript">
//註冊全局組件
Vue.component('test',{
template:'#template'
})
var app=new
Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>

和上次的模板一樣,我們可以用以下方法和模板公用:1:template直接在裏面寫我們的內容;2:就是上面的辦法,直接把內容直接寫在template標籤中,最終掛載到template上面即可,3:我們改變script中的type屬性,給id,最終掛載到template上面也可以,根據不同的需求,我們採用不同的實現方法

下面我把上面第三種以代碼的形式呈現給大家:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript"
src="/js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<test></test>
<test></test>
</div>
<script type="x-template"
id="template">
<div>全局註冊的組件和模板聯合使用的舉例3</div>
</script>
<script type="text/javascript">
//註冊全局組件
Vue.component('test',{
template:'#template'
})
var app=new
Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>

2>局部組件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript"
src="js/vue.js"></script>
<title>component-1</title>
</head>
<body>
<div id="app">
<test></test>
</div>
<script type="text/javascript">
var app=new
Vue({
el:'#app',
components:{
"test":{
template:'<div">局部註冊的組件</div>'
}
}
})
</script>
</body>