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 (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
随机推荐
- JDK-7新特性，更优雅的关闭流-java try-with-resource语句使用
前言 公司最近代码质量整改,需要对大方法进行调整,降低到50行以下,对方法的深度进行降低,然后有些文件涉及到流操作,很多try/catch/finally语句,导致行数超出规范值,使用这个语法可以很好 ...
- Scala面向对象—类详解2（继承相关）
1.单例类 package com.zzzy class AAA {//单例 /*//java 思路--私有化构造方法,提供公开的getAAA 行不通 private def this(){ this ...
- AtCoder Beginner Contest 176
比赛链接:https://atcoder.jp/contests/abc176 A - Takoyaki #include <bits/stdc++.h> using namespace ...
- poj 3468A Simple Problem with Integers
Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...
- http post请求数组参数写法
1.json形式 body如下(注意是中括号): [ *, *, * ] postman: fiddler: 2.x-www-form-urlencoded postman: fiddler: 3.服 ...
- C# 异常重试策略
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- SpringSecurity简单使用
什么是SpringSecurity? Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置 ...
- 【POJ 1148】Utopia Divided
Utopia Divided 题目链接:POJ 1148 题目大意 在一个坐标系中,一个点一开始在原点,然后被要求每次走到一个规定的象限内. 你有一些互不相同的数,每次你可以选每选过的两个,正负性可以 ...
- CF1462-F. The Treasure of The Segments
题意: 给出n个线段组成的集合,第i个线段用 \(\{l_i, r_i\}\) 表示线段从坐标轴的点\(l_i\)横跨到点\(r_i\).现在你可以删除其中的一些线段,使得剩下的线段组成的集合中至少存 ...
- CF1462-E2. Close Tuples (hard version)
本题为hard版,还有一个easy版,区别在于k和m的取值不同. 题意: 给出一个由n个数字组成的数组 \(a\).现在定义一种子集为\(\{A_1, A_2, A_3, ..., A_m\}\),使 ...