目录
Vue使用组件的三大步骤:
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
一、如何定义一个组件?
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但区别如下:
- el不要写。因为最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器
- data必须写成函数。避免组件被复用时,数据存在引用关系。
备注:使用template可以配置组件结构
二、如何注册组件?
局部注册:靠new Vue的时候传入components选项
全局注册:靠Vue,component(‘组件名’,组件)
三、编写组件标签
<组件名></组件名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非单文件组件基本使用</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>欢迎和{{name}}一起学习</h2><hr>
<!-- 第三步,编写组件标签 -->
<programmer></programmer>
<hr>
<brother></brother>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示
//第一步:创建programmer组件
const programmer = Vue.extend({
template:`
<div>
<h2>程序员姓名:{{programmerName}}</h2>
<h2>程序员年龄:{{age}}</h2>
</div>
`,
//el:'#root',组件定义时,一定不要写el配置项,最终所有的组件都由一个vm来统一进行管理,由vm决定服务对象。
data(){
return {
programmerName:'辉哥',
age:18
}
}
})
//第一步:创建brother组件
const brother = Vue.extend({
template:`
<div>
<h2>兄弟姓名:{{brotherName}}</h2>
<h2>兄弟年龄:{{brotherAge}}</h2>
</div>
`,
//el:'#root',组件定义时,一定不要写el配置项,最终所有的组件都由一个vm来统一进行管理,由vm决定服务对象。
data(){
return {
brotherName:'贺灵志',
brotherAge:18
}
}
})
//创建vm
new Vue({
el:'#root',
data:{
name:'才疏学浅的小缘同学',
},
// 第二步,注册组件
components:{
programmer,
brother
}
})
</script>
</html>