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 (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
随机推荐
- Pytest（18）pytest接口自动化完整框架思维导图
pytest接口自动化完整框架思维导图
- 【Azure Redis 缓存】如何得知Azure Redis服务有更新行为？
问题描述 Azure Redis作为微软云提供的一种PaaS服务,由于PaaS的特性,服务端的安装和维护.修补.升级等操作均由平台放负责.虽然最终用户只需要关注当前服务的使用,但是后台的升级和补丁行为 ...
- Educational Codeforces Round 90 (Rated for Div. 2) D. Maximum Sum on Even Positions（dp）
题目链接:https://codeforces.com/contest/1373/problem/D 题意 给出一个大小为 $n$ 的数组 $a$,下标为 $0 \sim n - 1$,可以进行一次反 ...
- uestc 1221 Ancient Go
Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submit Status Y ...
- 仿ATM程序软件
一.目标: ATM仿真软件 1 系统的基本功能 ATM的管理系统其基本功能如下:密码验证机制:吞锁卡机制:存取款功能:账户查询功能:转账功能等. 要求 要能提供以下几个基本功能: (1)系统内的相关信 ...
- AtCoder Beginner Contest 179 E - Sequence Sum (模拟)
题意:\(f(x,m)\)表示\(x\ mod\ m\),\(A_{1}=1\),而\(A_{n+1}=f(A^{2}_{n},M)\),求\(\sum^{n}_{i=1}A_{i}\). 题解:多算 ...
- log查看工具log2console
log查看工具log2console介绍:https://www.cnblogs.com/TianFang/archive/2013/03/27/2985296.html Log2Console日志监 ...
- Ubuntu Live CD联网修复
此模式下可以联网修复ubuntu系统下绝大多数问题.进入LIVE CD模式,打开终端执行以下命令: #此处/dev/sda1为ubuntu根分区,工作中根据实际分区情况更改 sudo mount /d ...
- spring再学习之AOP事务
spring中的事务 spring怎么操作事务的: 事务的转播行为: 事务代码转账操作如下: 接口: public interface AccountDao { //加钱 void addMoney( ...
- mysql+python+pymysql的一些细节问题
报错 (1044, "Access denied for user 'erio'@'localhost' to database 'library'") 就是权限问题了,没什么好说 ...