Vue.js 3 Step 创建一个组件
程序员文章站
2022-08-11 14:03:50
Step1：Vue.extend()创建组件 Step2：Vue.component()注册组件，注册的标签一定要用小写 Step3：挂载点使用组件 全局注册和局部注册 全局注册: 局部注册: 我们需要在声明挂载点的地方注入组件即可： 这样只能在挂载点为 app1地方使用my component组件 ......
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">
<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>