一.什么是组件化
vue.js 有两大法宝,一个是数据驱动,另一个就是组件化,那么问题来了,什么叫做组件化,为什么要组件化?接下来我就针对这两个问题一一解答,所谓组件化,就是把页面拆分成多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的,所以组件在系统内部可复用,组件和组件之间可以嵌套,如果项目比较复杂,可以极大简化代码量,并且对后期的需求变更和维护也更加友好。
二.如何注册组件
2.1 非单文件
注册组件
2.1.1 如何定义一个子组件?
-
如何定义一个组件?--使用Vue.extends(options)去创建
-
javaScript本质上是一个函数,我们后面写,Vue帮我们去new JavaScript
-
console.log(typeof (javaScript)); //function
-
-
Vue.extends(options)中的options是配置对象,这个配置和我们new Vue(options)一样,区别如下:
3.1 不能有el属性去指定容器
原因:所有组件实例最终要被一个VM所管理,vm中会指定好el,即:组件让位给那个容器
3.2 data必须写成函数
原因:==为了确保多个组件内的数据不会相互污染==
3.3 组件内的模板解构要配置在template里面,
1.使用模板字符串
2.模板字符串必须只有一个根标签
-
==组件命名方式,尽量用短横线,用驼峰命名,使用时也得是短横线。==最好就别用驼峰命名组件了
Vue.component('HelloWorld', ....... }); <hello-world></hello-world>
2.1.2 注册一个组件
2.1 全局注册:
```
Vue.component(组件名, 组件)
```
2.2 局部注册:局部组件只能在注册他的父组件中使用
在vm里添加一个components里注册
2.3 全局组件个局部组件的区别:
全局组件是挂载在 Vue.options.components
下,而局部组件是挂载在 vm.$options.components
下,这也是全局注册的组件能被任意使用的原因。
<!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>
</head>
<body>
<div id="app">
<h1>父组件</h1>
<h1>{{msg}}</h1>
<p>------------------------------</p>
<javascript></javascript>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
/*
一.如何定义一个子组件?
1.如何定义一个组件?--使用Vue.extends(options)去创建
2.javaScript本质上是一个函数,我们后面写<javaScript/>,Vue帮我们去new JavaScript
3.Vue.extends(options)中的options是配置对象,这个配置和我们new Vue(options)一样,区别如下:
3.1 不能有el属性去指定容器
原因:所有组件实例最终要被一个VM所管理,vm中会指定好el,即:组件让位给那个容器
3.2 data必须写成函数
原因:为了确保多个组件内的数据不会相互污染
3.3 组件内的模板解构要配置在template里面,
1. 使用模板字符串
2.模板字符串必须只有一个根标签
二.注册一个组件
2.1 全局注册
Vue.component(组件名, 组件)
2.2 局部注册
在vm里添加一个components里注册
*/
//1.定义一个组件
const javaScript = Vue.extend({
// el: "#app",
data() {
return {
course: "javaScript"
}
},
template: `
<div>
<h2>我是JS子组件</h2>
<h2>{{course}}</h2>
</div>`
})
// 2.全局注册一个组件
Vue.component('javascript', javaScript)
// console.log(typeof (javaScript)); //function
// 定义一个vm,去管理所有的组件
const vm = new Vue({
el: "#app",
data() {
return {
msg: "编程课程",
}
},
})
</script>
</html>
2.2 单文件
注册组件
2.2.1 什么是单文件组件:
把一个组件全部内容汇合到一个文件中,文件名字是以 .vue 结尾的就称作 vue单文件组件
2.2.2 最简单使用
- 通过Vuecli创建一个空的项目并运行
- 创建单文件组件 src/component/01.单文件组件.vue
- src/main.js 文件中导入、注册组件
- public/index.html 文件 使用 单文件组件
2.2.3 组织结构
<template>
相关html标签
</template>
<script>
export default {
data,
methods,
computed,
filters,
created,
……
}
</script>
<style>
css样式内容
</style>
三. 全局注册和局部注册
3.1 全局注册:
在 vue.js 中我们可以使用 Vue.component(tagName, options) 进行全局注册,例如
```
Vue.component(组件名, 组件) 或 Vue.component('my-component', { // 选项 }) ```
3.2 局部注册:局部组件只能在注册他的父组件中使用
Vue.js 也同样支持局部注册,我们可以在一个组件内部使用 components 选项做组件的局部注册,例如:
import HelloWorld from './components/HelloWorld'
export default {
components: {
HelloWorld
}
}
在vm里添加一个components里注册
3.3 全局组件个局部组件的区别:
==全局组件是挂载在 Vue.options.components
下,而局部组件是挂载在 vm.$options.components
下,这也是全局注册的组件能被任意使用的原因==
四.==理解Vue,VueComponent,VueModel之间的关系==
一.特别提示:
- Student确实是构造函数,但不是我们亲手写的Student,是Vue.extend生成的。
- Vue.extend调用的返回值是VueComponent构造函数,所以new Student其实就是在new VueComponent.
- 所谓组件实例,就是VueComponent创建的实例,简称vc 所谓Vue实例,就是Vue创建的实例,简称vm
二.最重要的关系总结: ==VueComponent继承了Vue,所以Vue.prototype上得属性和方法,vc度可以看得见==
<!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>非单文件组件2</title>
</head>
<body>
<div id="app">
<h1>------------App组件---------------</h1>
<h1>{{msg}}</h1>
<Person></Person>
<Student></Student>
</div>
<template id="p">
<div>
<h1>-----------Person对象-------------</h1>
<h2>{{msg}}</h2>
</div>
</template>
<template id="s">
<div>
<h1>-----------Student对象-------------</h1>
<h2>{{msg}}</h2>
</div>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
/*
三.特别提示:
3.1 Student确实是构造函数,但不是我们亲手写的Student,是Vue.extend生成的。
3.2 Vue.extend调用的返回值是VueComponent构造函数,所以new Student其实就是在new VueComponent.
3.3 所谓组件实例,就是VueComponent创建的实例,简称vc
所谓Vue实例,就是Vue创建的实例,简称vm
四.最重要的关系总结:
VueComponent继承了Vue,所以Vue.prototype上得属性和方法,vc度可以看得见
*/
Vue.config.productionTip = false;
const Person = Vue.extend({
data() {
return {
msg: "我是一个Person对象"
}
},
template: '#p'
})
Vue.prototype.xyz = 100;
const Student = Vue.extend({
data() {
return {
msg: "我是一个Student对象"
}
},
template: '#s'
})
/* Vue.component('Person', Person)
Vue.component('Student', Student) */
const vm = new Vue({
el: "#app",
data() {
return {
msg: "Hello Vue"
}
},
components: {
Student,
Person,
}
})
// vm.$children[0].__proto__.__proto__ === Vue.prototype //true
// vm.$children[0].__proto__ instanceof Vue //true
</script>
</html>
接上图