Vue组件
组件是可复用的 Vue 实例,且带有一个名字。
1.通过extend方式
我们先通过最原始的方式来实现看看,首先通过Vue.extends方法来定义一个全局组件。template 就是组件将来要展示的HTML内容
// 1.使用 Vue.extend 来创建全局的Vue组件
var com1 = Vue.extend({
template: "<h3>这是个Vue组件</h3>"
})
然后通过Vue.component来添加我们的组件
// 2.使用 Vue.component('组件的名称', 创建出来的组件模板对象)
Vue.component("myCom",com1);
注意组件的名称如果采用的是 驼峰命名法,那么在使用组件的时候 大写必须改为 小写 而且要用 “-”连接。 都是小写就没有关系了
当然上面的写法我们也看以简写为如下:
Vue.component("myCom",Vue.extend({
template: "<h3>这是我们使用的另一个组件</h3>"
}))
2.简写方式
第二种创建Vue组件的方式其实是在前面的基础上我们可以简写Vue.extend() 创建全局Vue组件的操作,如下
Vue.component("myCom",{
template: "<h2> 第二种创建的方式 </h2>"
})
注意 创建的组件HTML元素只能有一个root标签,如果有多个会报错,
用div括起来就可以了
3.template标签
在上面的例子中我们的组件元素都是直接在template中直接通过字符串来声明的,这种书写的时候没有智能提示,容易出现错误,这时我们可以通过 标签来定义 组件 HTML元素 然后通过id来使用。具体如下:
<template id="com1">
<div>
<h2> 第二种创建的方式234234 </h2>
<span>234234</span>
</div>
</template>
Vue.component("myCom", {
template: "#com1"
})
4.私有组件定义
上面我定义的都是全局的组件,接下来我们看看在单个Vue实例中定义私有的组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<my-com></my-com>
</div>
<template id="com1">
<div>
<h2> 第二种创建的方式234234 </h2>
<span>234234</span></div>
</template>
<script>
// Vue.component("myCom", {
// template: "#com1"
// })
var vm = new Vue({
el: "#app",
data: {
},
methods: {
},
components: { //定义私有组件
myCom: {
template: "#com1"
}
}
})
</script>
</body>
</html>