Vue知识点整理(二)- Vue组件化编程(1)- 使用组件三大步骤、组件的嵌套、VueComponent构造函数、重要的内置关系
一、模块 与 组件1.1 模块向外提供特定功能的js程序,一般就是一个js文件作用:复用js,简化js的编写,提高js运行效率1.2 组件组件的定义:实现应用中局部功能代码和资源的集合作用:复用编码,简化项目编码,提高运行效率二、模块化 与 组件化2.1 模块化当应用的js都是以模块来编写的,那这个应用就是一个模块化应用2.2 组件化当应用中的功能都是多组件的方式来编写的,那这个就是一个组件化的应
目录
一、模块 与 组件
1.1 模块
向外提供特定功能的js程序,一般就是一个js文件
作用:复用js,简化js的编写,提高js运行效率
1.2 组件
组件的定义:实现应用中局部功能代码和资源的集合
作用:复用编码,简化项目编码,提高运行效率
二、模块化 与 组件化
2.1 模块化
当应用的js都是以模块来编写的,那这个应用就是一个模块化应用
2.2 组件化
当应用中的功能都是多组件的方式来编写的,那这个就是一个组件化的应用
三、Vue中使用组件的三大步骤
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
3.1 如何定义一个组件
使用 Vue.extend(options) 创建,其中 options 和 new Vue(options) 时传入的那个 options 几乎一样,但区别如下:
- el不写 —— 因为最终所有的组件都要经过一个vm管理,由vm中el决定服务哪个容器
- data必须要写成函数 —— 避免组件被复用时,数据存在引用关系
注意:使用template可以配置组件结构
3.2 如何注册组件?
- 局部注册:在 new Vue 的时候传入 components 选项
- 全局注册:靠 Vue.component('组件名',组件)
3.3 编写组件标签
- <组件名></组件名>
- 快捷键:组件名 + > + TAB按键
- 在VS Code设置选项内直接设置,勾选相关设置后,只需按TAB键即可
3.4 案例练习 -- 非单文件组件基本使用
<body>
<div class="root">
<!-- 第三步:编写组件标签 -->
<game></game>
<hr />
<player></player>
<say></say>
<hr />
</div>
<div class="root2">
<say></say>
</div>
</body>
<script>
Vue.config.productionTip = false;
// 第一步:创建game组件
const game = Vue.extend({
// 组件定义时,不要写el配置项
template: `
<div>
<h2>游戏名:{{gameName}}</h2>
<h2>创作者:{{creater}}</h2>
</div>
`,
data() {
return {
gameName: "艾尔登法环",
creater: "宫崎英高",
};
},
});
// 第一步:创建player组件
const player = Vue.extend({
// 组件定义时,不要写el配置项
template: `
<div>
<h2>玩家名:{{playerName}}</h2>
<h2>角色初始身份:{{status}}</h2>
</div>
`,
data() {
return {
playerName: "太阳骑士",
status: "无用之人",
};
},
});
// 第一步:创建say组件
const say = Vue.extend({
template: `
<div>
<h2>{{name}}跌上神坛</h2>
</div>
`,
data() {
return {
name: "宫崎老贼",
};
},
});
// 第二步:全局注册组件
Vue.component("say", say);
// 创建vm
new Vue({
el: ".root",
// 第二步:注册组件(局部注册)
components: {
game, // game:game 的简写形式,vm内定义的组件名:创建组件时定义的组件名,相同可简写
player,
},
});
// 为.root2服务的vm不注册任何的组件
new Vue({
el: ".root2",
});
</script>
3.5 关于组件的注意点
3.5.1 关于组件命名
一个单词组成的情况:
第一种写法(首字母小写),例如:name
第二种写法(首字母大写),例如:Name
多个单词组成的情况:
第一种写法(kebab-case命名):my-name
第二种写法(CamelCase命名):MyName(需要Vue脚手架支持)
注意:
- 组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行
- 可以使用name配置项指定组件在开发者工具中呈现的名字
const 自定义组件名 = Vue.extend({
name: 'name配置项指定组件在开发者工具中呈现的名字'
})
3.5.2 关于组件标签
第一种写法:<组件名></组件名>
第二种写法:<组件名/>
注意:不用使用脚手架时,<组件名/>会导致后续组件不能渲染
3.5.3 一个简写方式
const 自定义组件名 = Vue.extent(options) 可简写为: const 自定义组件名 = options
const mygame = {
name: "mygame",
template: `
<div>
<h2>玩家名:{{playerName}}</h2>
<h2>角色初始身份:{{status}}</h2>
</div>
`,
data() {
return {
playerName: "太阳骑士",
status: "无用之人",
};
},
};
四、组件的嵌套
以 3.4案例 为基础的组件嵌套
<body>
<div class="root">
<!-- 第三步:编写组件标签 -->
<app></app>
<!-- 可直接在vm内配置template -->
</div>
<div class="root2">
<say></say>
</div>
</body>
<script>
Vue.config.productionTip = false;
// 第一步:创建player组件
const player = Vue.extend({
// 组件定义时,不要写el配置项
template: `
<div>
<h2>玩家名:{{playerName}}</h2>
<h2>角色初始身份:{{status}}</h2>
</div>
`,
data() {
return {
playerName: "太阳骑士",
status: "无用之人",
};
},
});
// 第一步:创建game组件
const game = Vue.extend({
// 组件定义时,不要写el配置项
template: `
<div>
<h2>游戏名:{{gameName}}</h2>
<h2>创作者:{{creater}}</h2>
<player></player>
</div>
`,
data() {
return {
gameName: "艾尔登法环",
creater: "宫崎英高",
};
},
components: { player },
});
// 第一步:创建say组件
const say = Vue.extend({
template: `
<div>
<h2>{{name}}跌上神坛</h2>
</div>
`,
data() {
return {
name: "宫崎老贼",
};
},
});
// 定义app组件
const app = Vue.extend({
template: `
<div>
<game></game>
<say></say>
</div>
`,
components: {
game,
say,
},
});
// 创建vm
new Vue({
// template: `<app></app>`,
el: ".root",
// 第二步:注册组件(局部注册)
components: { app },
});
</script>
图示中可看出父子级关系
五、VueComponent构造函数
5.1 关于VueComponent
- 我们自定义命名的组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
- 我们只需要写 <组件名/> 或 <组件名></组件名>,Vue解析时会帮我们创建 自定义命名组件的实例对象
- 特别注意:每次调用Vue.extend,返回的都是一个全新的 VueComponent
- 关于this指向:
- 组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是【VueComponent实例对象】
- new Vue()配置中:data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是【Vue实例对象】
- VueComponent的实例对象,一般简称为vc(也可称之为:组件实例对象),Vue的实例对象,一般简称为vm
5.2 验证
<div class="root">
<!-- 第三步:编写组件标签 -->
<game></game>
</div>
</body>
<script>
Vue.config.productionTip = false;
// 第一步:创建game组件
const game = Vue.extend({
// 组件定义时,不要写el配置项
template: `
<div>
<h2>游戏名:{{gameName}}</h2>
<h2>创作者:{{creater}}</h2>
</div>
`,
data() {
return {
gameName: "艾尔登法环",
creater: "宫崎英高",
};
},
});
// 创建vm
new Vue({
el: ".root",
// 第二步:注册组件(局部注册)
components: { game },
});
</script>
5.2.1 验证第一点
在定义game组件后添加console.log输出
console.log("game", game);
5.2.2 验证第二点
在引入的Vue.js内搜索 VueComponent 所在的代码段,添加一段console.log输出
var Sub = function VueComponent(options) {
console.log("VueComponent被调用了"); // 个人添加
this._init(options);
};
且在容器内输出两次组件
<div class="root">
<!-- 第三步:编写组件标签 -->
<game></game>
<game></game>
</div>
图示可看到 VueComponent构造函数 执行了两次,并帮我们创建2个 自定义命名组件的实例对象
5.2.3 验证第三点
首先添加一个组件并注册,然后全等对比 先前已经定义的组件
const say = Vue.extend({
template: `
<div>
<h2>{{name}}跌上神坛</h2>
</div>
`,
data() {
return {
name: "宫崎老贼",
};
},
});
console.log(
"验证每次调用,返回的是不是一个全新的 VueComponent",
game === say
);
// 创建vm
new Vue({
el: ".root",
// 第二步:注册组件(局部注册)
components: { game, say },
});
由图示可知,全等对比的结果为false,即每次调用Vue.extend,返回的都是一个全新的 VueComponent
5.2.3 验证第四点
首先为先前定义的组件,添加含有点击事件的按钮
// 第一步:创建game组件
const game = Vue.extend({
// 组件定义时,不要写el配置项
template: `
<div>
<h2>游戏名:{{gameName}}</h2>
<h2>创作者:{{creater}}</h2>
<button @click='showName'>点击控制台显示this</button>
</div>
`,
data() {
return {
gameName: "艾尔登法环",
creater: "宫崎英高",
};
},
methods: {
showName() {
console.log("showName", this);
},
},
});
由图示可以看出,点击按钮后,控制台显示的this指向的是 VueComponent实例对象
六、一个重要的内置关系
一个重要的内置关系:
VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系:让组件实例对象(vc)可以访问到Vue原型上的属性、方法
首先由上图可以看出来,Vue.prototoype -> Vue的原型对象,然后 Vue.__proto__ -> Object的原型对象
Vue的实例对象:vm 同理,可以看出vm.__proto__ -> Vue的原型对象,然后 Vue.__proto__ -> Object的原型对象
可以简单设置一个vm,从控制台输出,然后从其prototype属性中找出Vue的原型对象内对应的方法,以及由Vue的原型对象内 __proto__属性找出 Object的原型对象 内的方法
<script>
Vue.config.productionTip = false;
// 创建vm
const vm = new Vue({
el: ".root",
});
console.dir(vm);
</script>
谷歌控制台 __proto__也按 [[prototoype]]来显示
而在VueComponent.prototoype -> VueComponent的原型对象,而 VueComponent.__proyo__并非最终指向 Object的原型对象,而是经过Vue的操作下指向了Vue的原型对象,所以 VueComponent.__proyo__ -> Vue的原型对象
写个案例认证一下这个说法,可以通过VueComponent实例对象 找到 VueComponent的原型对象,并且可以在 VueComponent.__proyo__内找到 Vue的原型对象
<script>
Vue.config.productionTip = false;
// 第一步:创建game组件
const game = Vue.extend({
// 组件定义时,不要写el配置项
template: `
<div>
<h2>游戏名:{{gameName}}</h2>
<h2>创作者:{{creater}}</h2>
</div>
`,
data() {
return {
gameName: "艾尔登法环",
creater: "宫崎英高",
};
},
});
// 创建vm
const vm = new Vue({
el: ".root",
// 第二步:注册组件(局部注册)
components: { game },
});
console.dir(game);
</script>
因此 让组件实例对象(vc)可以访问到Vue原型上的属性、方法
为Vue.prototype 添加个x属性来做个简单验证
<body>
<div class="root">
<!-- 第三步:编写组件标签 -->
<game></game>
</div>
</body>
<script>
Vue.config.productionTip = false;
Vue.prototype.x = 9527;
// 第一步:创建game组件
const game = Vue.extend({
// 组件定义时,不要写el配置项
template: `
<div>
<h2>游戏名:{{gameName}}</h2>
<h2>创作者:{{creater}}</h2>
<button @click='showX'>点击按钮输出x</button>
</div>
`,
data() {
return {
gameName: "艾尔登法环",
creater: "宫崎英高",
};
},
methods: {
showX() {
console.log(this.x);
},
},
});
// 创建vm
const vm = new Vue({
el: ".root",
// 第二步:注册组件(局部注册)
components: { game },
});
</script>
由图可看出 VueComponent实例 上点击按钮 输出的x,与 Vue.prototype.x 的值相同
更多推荐
所有评论(0)