Vue框架-组件的概念及使用
一、Vue组件
概念：html、css与js的集合体，为该集合体命名，用该名字复用html、css与js组成的集合体 => 复用性
1. 组件分类
1.1 根组件
根组件：new vue()生成的组件。
new Vue({
el: 'section',
data: {},
methods: {},
});
1.2 局部组件
局部组件：组件名 = {}， {}内部采用的是vue的语法。定义后需要在根组件中注册。
let myTag = {
template: `
<div>
<h1>我是局部组件</h1>
</div>
`
};
new Vue({
el: 'section',
data: {},
methods: {},
components: {
myTag,
},
});
1.3 全局组件
全局组件：Vue.component('组件名',{})，{}内部采用的是vue语法。不需要在vue实例中注册。
注意：全局组件必须写在vue实例上方，不然渲染不出来。
Vue.component('my-tag2',{
template: `
<div>
<h1>我是局部组件</h1>
</div>
`
});
new Vue({
el: 'section',
data: {},
methods: {},
});
2. 组件的特点
1、组件都有管理自己HTML页面结构的template实例成员。
- template对应的值才是vue实例真正要用的虚拟Dom。
- 挂载点挂载的标签是真实的标签。
- template只能有一个根标签。
2、根组件是最顶层的父组件，局部与全局组件为子组件，也可以成为其他局部与全局组件的父组件。
3、子组件的数据需要隔离(数据组件化，每一个组件都拥有自己独立的名称空间)。
4、局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件。（局部组件不注册就是一个普通对象）
5、组件中出现的所有变量(模板中、逻辑中)，都由该组件自己提供管理。(子组件若有根组件，则子组件中的变量由根组件提供。)
6、局部全局和根组件都是一个vue实例，一个实例对应一套html、css、js结构，所以实例也是组件。
3. 如何创建组件
1、声明组件
2、注册组件(全局组件不需要注册)
- component
3、渲染组件
let myTag = {
template: `
<div>
<h1>我是局部组件</h1>
</div>
`
};
Vue.component('my-tag2',{
template: `
<div>
<h1>我是局部组件</h1>
</div>
`
});
new Vue({
el: 'section',
data: {
msg:'组件'
},
methods: {},
components: {
myTag,
},
});
注意：
- el挂载的标签会被实例中的template属性对应的模板替换，所以不要在跟组件中设置template属性。
<body>
<div id="app">
{{ msg2 }}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: '组件信息',
msg2: '组件信息2'
},
template: '<p>{{ msg }}</p>',
})
</script>
</html>
总结：
- 根组件，可以不明确template，template默认采用挂载点页面结构；如果设置了template，就会导致挂载点内部的内容无效，因为会被template替换。
4. 组件的数据局部化
局部或全局组件，每个组件可能会被复用多次，但是组件的样式相同，不一定数据也相同，所以每个组件应该有自己独立的变量名称空间来记录本组件的数据。
因此，将组件数据局部化的目的，是让组件之间数据隔离。
做法：
- 将data写成函数，返回本来data对应的字典，这样就可以通过函数产生一个局部作用域来作为组件本身单独的名称空间。
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</div>
</body>
<script>
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>数了{{ count }}下</h2>
</div>
`,
data() {
return { // 产生名称空间
count: 0,
}
},
methods: {
fn() {
console.log(this);
this.count++;
}
}
};
new Vue({
el: '#app',
data: {},
components: {
localTag,
}
});
</script>
5. 组件传参·父传子
有时候我们需要将父标签中的一些数据传给子标签进行渲染，但是此时子标签已经使用独立的名称空间了，该怎么做呢？
我们可以将父标签中的数据作为变量值赋给子标签的某个属性，这样就可以通过这个属性来访问属性值了，而刚好这个属性值就是我们需要的父标签的数据。
那么什么属性可以用来接收数据呢？
答案是自定义属性。
1、子组件可以通过props自定义组件属性（采用反射机制，需要填写字符串，但是使用时可以直接作为变量）
2、将父组件的变量赋值给子组件的自定义属性，就可以将该子组件的自定义属性当做变量来使用。通过这个自定义属性就可以访问父标签中的data数据了。
<body>
<section>
<my-tag :myprop="msg"></my-tag>
</section>
</body>
<script>
let myTag = {
props:['myprop',],
template: `
<div>
<h1>{{ myprop }}</h1>
</div>
`
};
new Vue({
el: 'section',
data: {
msg:'我是根标签里面的msg'
},
methods: {},
components: {
myTag,
},
});
</script>
6. 组件传参·子传父
若是父标签需要用到子标签内部的data数据该怎么办呢？
可以通过在子标签内部使用this.$emit('自定义事件名', 触发事件回调的参数们)方法手动将标签的自定义事件触发。
此时子标签的自定义事件对应的是父标签的某个方法，this.$emit('自定义事件名', 触发事件回调的参数们)而这里面的参数则会从子标签中弹出，传入父标签方法中由其接收。
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h3>{{ h3 }}</h3>
<tag @action="actionFn"></tag>
</div>
</body>
<script>
let tag = {
template: `
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改标题</button>
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
changeTitle() {
if (this.t1 && this.t2) {
this.$emit('action', this.t1, this.t2);
// 清空t1和t2
this.t1 = '';
this.t2 = '';
}
}
}
};
new Vue({
el: '#app',
data: {
h1: '主标题',
h3: '子标题'
},
components: {
tag2,
},
methods: {
actionFn(a, b) {
console.log('触发了', a, b);
this.h1 = a;
this.h3 = b;
},
}
})
</script>
Vue框架-组件的概念及使用的更多相关文章
- vue框架组件之父子组件之间的通信
1.如图看解说: 你子标签要给我父标签传递信息,你总得有个触发机制告诉我这是怎么回事对吧 要不我怎么知道你要传数据给我呢!
- Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置
Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置 这是上一篇对目录简单介绍: 关于编辑器,可以使用轻量级的 Sublime Text 3,我使用的是 HBuilder, 但 ...
- Vue 框架-09-初识组件的应用
Vue 框架-09-初识组件的应用 今天的第一个小实例,初步使用组件: 在 app.js 中定义模板组件,在 html 文件中使用自定义标签来显示 js 文件中定义的 html 代码块 比如说,下面定 ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- WijmoJS V2019.0 Update2发布：再度增强 React 和 Vue 框架的组件功能
前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...
- vue统计组件库和ui框架
UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...
- Vue框架：vue-cookies组件
目录 一.vue-cookies简介 二.vue-cookies安装与配置 三.vue-cookies的使用 一.vue-cookies简介 vue-cookies组件是vue框架用来操作浏览器coo ...
- vue框架中的日期组件转换为yyy-mm-dd格式
最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
- vue+element ui项目总结点（四）零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
随机推荐
- Mac通过docker一键部署airflow
目录 Airflow部署及使用 1.Dockerhub查看镜像地址 2.拉取docker镜像 3.在宿主机创建外挂文件夹 4.创建docker容器 5.重新创建docker容器 5.1.查看airfl ...
- mysql高级day2
Mysql高级-day02 1. Mysql的体系结构概览 整个MySQL Server由以下组成 Connection Pool : 连接池组件 Management Services & ...
- Java数组模拟队列 + 优化
队列介绍 队列是一个有序列表,可以用数组或是链表来实现. 遵循先入先出的原则. 即:先存入队列的数据,要先取出.后存入的要后取出 示意图:(使用数组模拟队列示意图) 数组模拟队列 队列本身是有序列表 ...
- HBase原理 – 分布式系统中snapshot是怎么玩的？(转载)
snapshot(快照)基础原理 snapshot是很多存储系统和数据库系统都支持的功能.一个snapshot是一个全部文件系统.或者某个目录在某一时刻的镜像.实现数据文件镜像最简单粗暴的方式是加锁拷 ...
- 掌握数位dp
最近遇到了数位dp题目,于是就屁颠屁颠的跑过来学习数位dp了~ "在信息学竞赛中,有这样一类问题:求给定区间中,满足给定条件的某个D 进制数或此类数的数量.所求的限定条件往往与数位有关,例如 ...
- vector总结
vector是不定长数组,具有静态数组的稳定性和动态分配内存的灵活性,在赛场上不失为指针之外牺牲部分时间的保险之举. 本文先介绍一些vector常用的函数(部分借鉴一篇博客中的内容 链接),并以此为铺 ...
- zoj3777 Problem Arrangement(状压dp，思路赞）
The 11th Zhejiang Provincial Collegiate Programming Contest is coming! As a problem setter, Edward i ...
- java——final、权限修饰符
final修饰类: final修饰成员方法: final修饰局部变量的时候: 对于基本类型来说,变量的数值不能改变 对于引用类型来说,变量的地址不能改变 final修饰成员变量的情况: 权限修饰符:
- 母函数 <普通母函数（HDU - 1028 ） && 指数型母函数（hdu1521）>
给出我初学时看的文章:母函数(对于初学者的最容易理解的) 普通母函数--------->HDU - 1028 例题:若有1克.2克.3克.4克的砝码各一 枚,能称出哪几种重量?各有几种可能方案? ...
- 单源最短路问题 Dijkstra 算法(朴素+堆)
选择某一个点开始,每次去找这个点的最短边,然后再从这个开始不断迭代,更新距离. 代码: 朴素(vector存图) #include <iostream> #include <cstd ...