本文我们开始来介绍下Vue中的组件,组件是可复用的 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">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
我们先通过最原始的方式来实现看看,首先通过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>"
}))
第二种创建Vue组件的方式其实是在前面的基础上我们可以简写Vue.extend() 创建全局Vue组件的操作,如下
Vue.component("myCom",{
template: "<h2> 第二种创建的方式 </h2>"
})
注意 创建的组件HTML元素只能有一个root标签,如果有多个会报错,如下
用div括起来就可以了
在上面的例子中我们的组件元素都是直接在template中直接通过字符串来声明的,这种书写的时候没有智能提示,容易出现错误,这时我们可以通过<template> 标签来定义 组件 HTML元素 然后通过id来使用。具体如下:
上面我定义的都是全局的组件,接下来我们看看在单个Vue实例中定义私有的组件。
使用不属于当前Vue实例的组件会报错
搞定~