Vue教程(组件-创建方式)
本文我们开始来介绍下Vue中的组件，组件是可复用的 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>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中直接通过字符串来声明的，这种书写的时候没有智能提示，容易出现错误，这时我们可以通过<template> 标签来定义 组件 HTML元素 然后通过id来使用。具体如下:
在这里插入图片描述
在这里插入图片描述
4.私有组件定义
上面我定义的都是全局的组件，接下来我们看看在单个Vue实例中定义私有的组件。
在这里插入图片描述
在这里插入图片描述
使用不属于当前Vue实例的组件会报错
在这里插入图片描述
在这里插入图片描述
搞定~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年07月24日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录