VUE学习：vue基础10————组件：组件的使用
提示：
本文为VUE栏目：VUE学习：vue基础10————组件：组件的使用
VUE学习：vue基础10————组件：组件的使用
- 前言
- 组件
-
- 示例：创建全局组件模板
- 简写形式：
-
- 简写一
- 简写二
- 私有组件
前言
本文vue框架中组件相关。
提示：以下是本篇文章正文内容，下面案例可供参考
组件
示例：创建全局组件模板
<body>
<div id="app" style="border: 1px solid tomato">
<wuyanzu>吴彦祖wuyanzu>
<jj>wyz啊jj>
div>
body>
<script>
/*创建全局组件模板*/
let wyz=Vue.extend({
template:'吴彦祖
'
});
// 挂载模板到组件对象上
Vue.component('jj',wyz);
let vm = new Vue({
el: "#app",
data: {
},
methods: {
}
});
script>
**吴彦祖**是无效的。
挂载模板到组件对象上**wyz啊**，输出h3标签包含的模块
简写形式：
简写一
<body>
<div id="app" style="border: 1px solid tomato">
<zwj>zwj>
div>
body>
<script>
Vue.component('zwj',Vue.extend({
template:'张无忌
'
}));
let vm = new Vue({
el: "#app",
data: {
},
methods: {
}
});
script>
简写二
不使用extend函数也能创建全局组件
<body>
<div id="app">
<test2>test2>
div>
body>
<script>
// 不使用extend函数也能创建全局组件
Vue.component('test2',{
template:'全局组件2
'
});
let vm = new Vue({
el: "#app",
data: {
},
methods: {
},
});
script>
HTML中规定标签名不区分大小写，推荐标签名全小写，如果标签名多个单词组成，中间用横线隔开。
<body>
<div id="app" style="border: 1px solid tomato">
<my-test>my-test>
<my--test>my--test>
div>
<div id="app2">
<zwj>zwj>
<test2>test2>
<login>login>
div>
body>
<script>
Vue.component('myTest',Vue.extend({
template:'张三丰
'
}));
Vue.component('my-Test',Vue.extend({
template:'张翠山
'
}));
let vm = new Vue({
el: "#app",
data: {
},
methods: {
}
});
script>
重点:如果模板输出的内容为多个标签组成，则这多个标签一定要有一个父级标签。
自定义组件的template属性指向的模板内容，必须只能有一个根元素(只能返回一个标签，但是该标签内可以存在多个标签)
<body>
<div id="app" style="border: 1px solid tomato">
<test2>test2>
div>
body>
<script>
Vue.component('test2',Vue.extend({
template:'p1
p2
'
}));
let vm = new Vue({
el: "#app",
data: {
},
methods: {
}
});
script>
私有组件
<body>
<div id="app" style="border: 1px solid tomato">
<test2>test2>
<login>login>
div>
<div id="app2">
<test2>test2>
<login>login>
div>
body>
<script>
/*重点:如果模板输出的内容为多个标签组成，则这多个标签一定要有一个父级标签。*/
/*自定义组件的template属性指向的模板内容，必须只能有一个根元素（只能返回一个标签，但是该标签内可以存在多个标*/
Vue.component('test2',Vue.extend({
template:'p1
p2
'
}));
let vm = new Vue({
el: "#app",
data: {
},
methods: {
}
});
let vm2 = new Vue({
el: "#app2",
data: {
},
methods: {
},
components:{
login:{
template:"我是私有组件
"
}
}
});
script>
login标签只在app2中被实现