目录
什么是组件
组件其实就是实现应用中的局部功能的代码和资源的一个集合。
他是用来简化项目代码、提高代码复用度以此提高运行的效率
非单文件组件
一个文件中他包含了N个组件。
单文件组件
一个文件中他包含且只包含一个组件
如何定义一个组件
我们使用Vue.extend(opeions)可以创建一个组件
我们可以看到options和new Vue(options)时候传入的参数看名字是一样的,他们也是you却别的:
1、自定义组件的时候,不能写el。(el是有vm来决定那个容器来显示的。)
2、data必须要写成函数形式,不能像new Vue那样写(当组件不我们复用的时候,避免数据存在应用关系)
3、通过使用template可以配置组件的结构信息
简写方式
const student = Vue.extent(options)他和下面的简写实现的效果是一致的。
const school = options
组件名定义
1、一个单词组成
1)、首字母小写:student
2)、首字母大写:Student
2、多个单词组成
1)、kebab-case命名:her-student
2)、CamelCase命名:HerStudent(这种方式是需要我们使用Vue脚手架创建项目)
注意:
1、定义组件名字的时候,要避免使用Html中已经拥有的元素名称、比如:a
2、可以使用name这个配置项来制定组件在开发者工具中呈现的名字
如何注册一个组件
两种注册方式:局部注册和全局注册
1、使用Vue.component('组件名',组件)来实现全局注册
2、使用new Vue的时候传入components选项来实现局部注册
编写组件标签
1、<我们自定义的组件标签></我们自定义的组件标签>
2、<我们自定义的组件标签/> 这种方式是在使用脚手架创建的时候才会起作用
使用组件的步骤
1、创建组件(我们首先要自己定义/创建一个组件)
2、注册组件
3、使用组件(通过组件标签来实现)
对VueComponent的理解
从单词表面理解为:Vue的组件
1、Student组件,他本质上是一个名为VueComponent的构造函数,并且他不是我们程序员来定义的,而是由Vue.extent给我们生成的。
2、其实说得简单点是vue帮我们处理了,我们在使用的时候只要写<studeng></studeng>或者<Student/>了,Vue在解析的时候就会自动替我们来创建了student组件的一个实例对象。
3、我们在每次去调用Vue.extent的时候,他返回的都是新床架的VueCompent
4、组件配置的data函数、watch内函数、methods内的函数computeuted内的函数,他们统统都是指向了VueCompent的实例对象,我们可以简称为 组件的实例对象
5、new Vue(options)中配置的data函数、watch内函数、methods内的函数computeuted内的函数,他们统统都是指向了Vue的实例对象,也就是我们常说的vm
重要的内置关系
VueComponent.prototype.__proto__ === Vue.prototype
之所以作者给我们提供了这个属性,就是为了让我们的组件实例对象 ,可以很轻松的访问到Vue原型上的属性以及方法
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>一个重要的内置关系</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<student></student>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
Vue.prototype.x = 100
//定义student组件
const student = Vue.extend({
name:'student',
template:`
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showX">点我输出x</button>
</div>
`,
data(){
return {
name:'北大青鸟',
address:'宣武门'
}
},
methods: {
showX(){
console.log(this.x)
}
},
})
//创建一个vm
const vm = new Vue({
el:'#root',
data:{
msg:'你好'
},
components:{student}
})
//定义一个构造函数
/* function Demo(){
this.a = 1
this.b = 2
}
//创建一个Demo的实例对象
const d = new Demo()
console.log(Demo.prototype) //显示原型属性
console.log(d.__proto__) //隐式原型属性
console.log(Demo.prototype === d.__proto__)
//程序员通过显示原型属性操作原型对象,追加一个x属性,值为99
Demo.prototype.x = 199
console.log('@',d) */
</script>
</html>
好了,今天关于vue中组件的内容就到这里。
欢迎大家点击下方卡片,关注《coder练习生》