Vue创建组件
2019-04-20 本文已影响0人
小丘啦啦啦
- 无论以那种方式创建组件，组件的template属性指向的模板内容，有且只能有一个根元素。
- 创建全局组件其实也可以说是一种方式。
一、创建全局组件
全局组件，即可以在任意Vue实例内容区调用，因为是全局。
1、使用Vue.extend创建全局的Vue组件
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- 使用组件，把组件名称以html标签形式引入到页面中 -->
<!-- 注意：如果组件名称是驼峰命名，引入的时候要改为小写和-连接，其他时候可以直接引入 -->
<my-com1></my-com1>
</div>
<script>
// 使用Vue.extend来创建全局的Vue组件
//创建一个组件模板对象
var com1 = Vue.extend({ //传入一个配置对象
//通过template属性,指定组件要展示的html内容结构，模板
template: '<h3>这是使用Vue.extend创建的组件</h3>'
});
//也可以通过对象字面量形式，定义一个组件模板对象
// var com1 = {
// template: '<h3>这是使用Vue.extend创建的组件</h3>'
// };
//使用Vue.component('组件名称',创建出来的组件模板对象即如com1)注册一个全局组件
Vue.component('myCom1', com1);
//之后在页面写了一个myCom1,对应就会展示com1模板对象中template的内容
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
});
</script>
</body>
</html>
创建一个组件要分两个步骤，有点赘余，可以合为一个步骤。
2、直接使用Vue.component创建全局Vue组件
第一种方法分为两步，可以合成一步简写来创建组件。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<my-com1></my-com1>
</div>
<script>
//可合为一步创建组件
/* Vue.component('myCom1', Vue.extend({
template: '<h3>直接使用Vue.component创建的Vue组件</h3>'
})); */
//也可以是一个字面量对象
Vue.component('myCom1',{
template: '<h3>直接使用Vue.component创建的Vue组件</h3>'
});
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
});
</script>
</body>
</html>
前面两种写template指向的模板字符串标签内容的时候会没有内容提示，容易写错，所以可以把模板字符串标签提出来。
3、通过template元素在外部定义组件结构
在被Vue对象控制的元素外面，用Vue提供的template元素定义组件的html模板，在html处定义代码结构舒服，编辑器有智能提示。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<mycom1></mycom1>
</div>
<!-- 在被vue对象控制的元素#app外面使用template元素，定义组件的html标签 -->
<template id="tmp1">
<!-- 此处template内部也只能有一个根元素 -->
<div>
<h3>这是通过template元素在外部定义html模板的组件</h3>
</div>
</template>
<script>
//也可以是一个字面量对象
Vue.component('mycom1',{
template: '#tmp1' //id指向一个元素
});
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
});
</script>
</body>
</html>
二、创建私有组件
即在Vue实例对象中加上components属性，指向一个模板对象。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='app1'>
<log1></log1>
</div>
<div id='app2'>
<log2></log2>
</div>
<template id="templ2">
<h2>app2的私有组件</h2>
</template>
<script>
var log2 = {
template: '#templ2'
};
var vm1 = new Vue({
el: "#app1",
components: {
log1: {
template: '<h1>app1的私有组件</h1>'
}
},
});
var vm2 = new Vue({
el: '#app2',
components: {
log2 //也可以直接引用外部定义的模板对象
}
});
</script>
</body>
</html>
