您的位置：首页 > Web前端 > Vue.js

Vue.js 3 Step 创建一个组件

2019-05-18 09:19 330 查看

Step1：Vue.extend()创建组件
Step2：Vue.component()注册组件，注册的标签一定要用小写
Step3：挂载点使用组件

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>3 Step 创建一个组件</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="app1">
<!-- Step3：挂载点1使用组件 -->
<my-component></my-component>
</div>
<div id="app2">
<!-- Step3：挂载点2使用组件 -->
<my-component></my-component>
</div>
<div>
<!-- 这里不属于挂载点，所以不会显示！ -->
<my-component></my-component>
</div>
<script type="text/javascript">
//Step1：创建组件
var myComponent = Vue.extend({
template: "<div>这是一个组件</div>"
})
//Step2：注册组件 在这里采用"全局注册"组件，也就是每个挂载点都可以使用组件
Vue.component('my-component', myComponent)

new Vue({
el: '#app1', //挂载点1
})
new Vue({
el: '#app2' //挂载点2
})
</script>
</body>

</html>

全局注册和局部注册

全局注册:

Vue.component('my-component', myComponent)

局部注册:

我们需要在声明挂载点的地方注入组件即可：

new Vue({
el: '#app1',
components:{
'my-component', myComponent'
}
})

这样只能在挂载点为#app1地方使用my-component组件，在挂载点#app2的地方使用my-component组件就会报错。

语法糖创建并注册组件

<!doctype html>
<html>

<head>
<meta charset="utf-8">
&
20000
lt;title>3 Step 创建一个组件</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="app1">
<!-- Step3：挂载点1使用组件 -->
<my-component></my-component>
</div>
<div id="app2">
<!-- Step3：挂载点2使用组件 -->
<my-component></my-component>
<hr>
<strong>使用语法糖创建并注册组件</strong>
<sugar-component></sugar-component>
</div>
<div>
<!-- 这里不属于挂载点，所以不会显示！ -->
<my-component></my-component>
</div>
<hr >
<strong>使用语法糖在局部注册并创建多个组件</strong>
<div id="app3">
<sugar-component2></sugar-component2>
<sugar-component3></sugar-component3>
</div>
<script type="text/javascript">
//Step1：创建组件
var myComponent = Vue.extend({
template: "<div>这是一个组件</div>"
})
//Step2：注册组件 在这里采用"全局注册"组件，也就是每个挂载点都可以使用组件
Vue.component('my-component', myComponent)

//Step2: 可以使用语法糖,省略Step1,“全局注册”组件的同时创建模板内容
Vue.component('sugar-component', {
template: '<div>这是用语法糖创建并注册的组件，这样就可以省略自己使用Vue.extend创建组件的步骤，系统会自动为我们使用Vue.extend去创建组件。</div>'
})

new Vue({
el: '#app1', //挂载点1
})
new Vue({
el: '#app2' //挂载点2
})
new Vue({
el: '#app3', //挂载点3,同样可以再局部使用语法糖创建并注册组件
components: {
'sugar-component2': {
template: '<div>这是使用语法糖在局部注册并创建组件的内容。</div>'
},
'sugar-component3': {
template: '<div>使用语法糖，在局部可以同时创建并注册“多个组件”的内容。</div>'
}
}
})
</script>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航