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 (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
随机推荐
- javascript脚本何时会被执行
javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是声明函数的脚本或通过事件调用脚本函数,下面分析这几种情况. 1.浏览器在打开页面时执 ...
- cassandra权威指南读书笔记--读写数据
写cassandra除了轻量级事务,不支持别的事务.cassandra是追加写,写的速度非常快.cassandra还有hint日志,这个数据库总是可写的,而且单个列的写操作是原子的.hint并不是一定 ...
- CPU中的程序是怎么运行起来的（预告篇）
总述 最近一位朋友问我,我开发的代码是怎么运行起来的,我就开始给他介绍代码的预编译.汇编.编译.链接然后到一般的文件属性,再到代码运行.但是大佬问了我一句,CPU到底是怎么执行到每一个逻辑的, ...
- springBoot之 spring-boot-starter-parent 引入详解
springBoot中引入 <parent> <groupId>org.springframework.boot</groupId> <artifactId& ...
- 使用TCP发送文件
客户端 package com.zy.demo3; import java.io.File; import java.io.FileInputStream; import java.io.IOExce ...
- Educational Codeforces Round 39
Educational Codeforces Round 39 D. Timetable 令\(dp[i][j]\)表示前\(i\)天逃课了\(j\)节课的情况下,在学校的最少时间 转移就是枚举第\ ...
- 2018-2019 ACM-ICPC, Asia Dhaka Regional Contest C.Divisors of the Divisors of An Integer (数论)
题意:求\(n!\)的每个因子的因子数. 题解:我们可以对\(n!\)进行质因数分解,这里可以直接用推论快速求出:https://5ab-juruo.blog.luogu.org/solution-p ...
- 如何使用Gephi工具进行可视化复杂网络图
在Gephi安装官网中也介绍了一些如何使用该工具的方法,我将根据自己的数据和可视化的图片进行介绍 第一步:整理数据格式,我的数据是.csv格式的(.xlsx,.xls等等) 数据第一行第一列必须是相同 ...
- 通过js正则表达式实例学习正则表达式基本语法
正则表达式又叫规则表达式,一般用来检查字符串中是否有与规则相匹配的子串,达到可以对匹配的子串进行提取.删除.替换等操作的目的.先了解有哪些方法可以使用正则对字符串来实现这些操作: RegExpObje ...
- System.Windows.Forms.Help
在开发过程中,基本都需要实现帮助功能,而一般帮助功能就是打开一个帮助文档,System.Windows.Forms提供了Help类用于打开帮助文档,挺方便的. Help类提供的方法如下: Name ...