Vue的组件及传参
Vue的组件及传参
Vue组件的概念
我们首先要知道组件的概念,实际上每一个组件都是一个vue实例,也就是我们之前所生成的new Vue({}),组件有以下几个特点:
- 每个组件要有自己的template模板,根组件的模板就是我们在定义Vue的时候挂载点所在的那个大标签,
- 每个组件的模板只能有一个跟标签,这点很重要,就是说不管是根组件还是子组件,其模板template里面都不能包含多于一个的跟标签
- 子组件的数据有其自己的作用域,所以我们在定义子组件的时候要对其数据做局部化处理,以达到对组件复用之后数据独立的效果,即用
data(){}来返回其数据,返回的数据应该是子组件自身绑定方法的返回值,并以字典的方式返回
根组件
上文中已经说过,根组件的定义非常简单
<script>
let app = new Vue({
el:'#app', //根组件的template模板其实就是挂载的这个标签的所有内容
data:{
msg:"根组件"
},
})
</script>
子组件(局部组件)
子组件的定义方式就比根组件要麻烦一些,具体如下:
- 定义一个子组件,里面要有template模板,data数据返回,methods局部数据处理等
- 定义完成之后要在根组件所在的Vue里面的components写入子组件的名称,才能生效
<script>
let tag = {
template: `
<div class="box">
</div>
`,
//子组件的模板要自己写,写的方式是template:``,这里是两个反引号,就是键盘1左边的那个键,我们在反引号中间写自己想要呈现的组件的样式
data () {
return {
num: 0
}
},
//子组件要有自己的数据的局部化处理,这里就是,
methods: {
fn() {
this.num ++
}
},
//这里是对局部化后的数据进行操作,是独立于其余的复用组件的
};
new Vue({
el: '#app',
components: {
tag,
}
//关键字为components,子组件在定义完成之后需要在根组件所在的new Vue里面的cmponents里面写入子组件的名称.
});
</script>
父组件向子组件传值
父组件向子组件传值的前提是,该子组件是属于该父组件的,不能向并不属于自己的子组件传值,另外,父组件向子组件传值的时候,要注意以下几点:
- 数据首先是在父组件里面产生的,然后才传到子组件,顺序不能反
- 子组件用props来接收父组件中的值,收到之后就可以在子组件里面当做一个变量来使用
<body>
<div id="app">
<div class="wrap">
<tag v-for="dog in dogs" v-bind:dog="dog" :a="1" :b="2"/>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let dogs = [{1},{2},{3}]
let tag = {
props: ['dog', 'a', 'b', 'z'],
//子组件内部通过props来接收父组件的传值,这样可以接收父组件里面存在的所有值,只要父组件有,都可以接收,如果父组件里没有,比如z,那么会取到none,也不会报错
template: `
<div class="box">
<p>{{ dog }}</p>
</div>
`,
data () {
return {
num: 0,
}
},
methods: {
fn() {
this.num ++
}
},
};
new Vue({
el: '#app',
data: {
dogs,
},
components: {
tag, //这里证明tag子组件是属于父组件的
}
});
</script>
子组件向父组件传值
以正常逻辑来看,父组件向子组件传值比较常见,也比较符合逻辑,即我们先在父组件里面生成数据,然后子组件从里面取,逻辑没问题,所以如果反过来,子组件向父组件传值,就会存在一些问题,过程也更为繁琐,虽然可以实现,但是实际应用并不太多,因为我们总能够规避这种情况.不过还是有一些场景会用的到,所以我们要了解其具体的传参过程是怎么样的.
子组件向父组件传值的关键字是$emit,用法是要写在子组件的methods中,如下例,该实例所完成的是简单实现一个留言楼,我们可以在input框里面输入内容,点击留言,就会把我们输入的内容加入到下面的留言楼里,每条留言有一个按钮,点击就可以删除该条留言:
<body>
<div id="app">
<input type="text" v-model="msg">
<button @click="send_comment">留言</button>
<ul>
<tag v-for="(v, i) in comments" :msg="v" :index="i" @f1="deleteMsg"/>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tag = {
props: ['msg', 'index'],
template: `
<li>
<i class="d-btn" @click="fn">x</i>
<b>{{ msg }}</b>
</li>
`,
methods: {
fn () {
// 点击子集，要告诉父级删除第几条数据，也就是传给父级一个index序号的值,因为留言的数组comments在父级中,所以只能由父级来删除留言
this.$emit('f1', this.index);
//$emit的用法,后面括号里是('父组件接收的方法','传递的数据'),也就是说由父级的f1方法来接收,而f1方法实际调用的是deleteMsg,是定义在父级的methods里面的
}
}
};
new Vue({
el: '#app',
data: {
msg: '',
comments:[],
},
components: {
tag,
},
methods: {
send_comment() {
if (this.msg) {
this.comments.push(this.msg);
this.msg = '';
}
},
deleteMsg(index) {
this.comments.splice(index, 1);//这里我们用splice来切割comments数组,splice('开始位置','替换多少位','替换为什么值'),第三个如果为空,就是把前面两个参数定位的数据删除
}
}
})
</script>
Vue的组件及传参的更多相关文章
- vue 父子组件相互传参
转自https://blog.csdn.net/u011175079/article/details/79161029 子组件: <template> <div> <di ...
- vue父子组件路由传参的方式
一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...
- vue 父子组件之间传参
父组件中有子组件 msg 为父组件向子组件传的内容, 子组件向父组件传参数 子组件:this.$emit("shownumber",[this.num]);//this.$emi ...
- 前台VUE的组件之间传参方式
路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name}}& ...
- 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参？
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
随机推荐
- 一张图看懂阿里云网络产品【十五】IPv6 解决方案
摘要: 作为国内首家全面支持IPv6的云厂商,阿里云12月再次推出全栈IPv6解决方案,核心产品已全面支持,协助客户小时/天级即可完成IPv6 访问.方案成功历经优酷.淘宝.天猫.双十一考验.SLB ...
- javascript基础总结之实例(一)
样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- 依赖背包优化——ural1018，金明的预算方案
经典题了,网上博客一大堆O(nCC)的做法,其实是可以将复杂度降到O(nC)的 参考依赖背包优化(泛化物品的并) 根据背包九讲,求两个泛化物品的和复杂度是O(CC)的,所以依赖背包暴力求解的复杂度是O ...
- Prometheus监控node-exporter常用指标含义
一.说明 最近使用Prometheus新搭建监控系统时候发现内存采集时centos6和centos7下内存监控指标采集计算公式不相同,最后采用统一计算方法并整理计算公式如下: 1 100-(node_ ...
- Delphi GDI(一)
Delphi 7下IGDIPlus库的使用 IGDI+是一个免费开源封装微软GDI+功能的Delphi库,该库使得可以用Delphi语言代码快速简短的实现复杂GDI+应用程序. 官方网站:http:/ ...
- NX二次开发-将工程图上的每个视图导出PNG图片
大概思路是将每个视图导出PDF,在调另一个项目的EXE(PDF转PNG) //ExportDrawViewPng // Mandatory UF Includes #include <uf.h& ...
- NX二次开发-获取按钮的ID UF_MB_ask_button_id
NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...
- 从[id setValue: forKey:]了解KVC
<Objective-C基础教程> P224页有详细介绍 下边是apple官网的简单介绍 和一个应用的例子. KVC就是Key-value coding,大意是允许通过一个Key来读写一个 ...
- 用mybatis时log4j总是不记录sql语句
log4j:WARN No appenders could be found for logger (org.apache.ibatis.logging.LogFactory).log4j:WARN ...
- 【牛客提高训练营5B】旅游
题目 吉老师的题时过一年还是不会做 从\(1\)号点出发经过每条边至少一次并且还要回到\(1\)号点,这跟欧拉回路的条件非常像,但是欧拉回路的实际上是"经过每一条边恰好一次并且回到出发点&q ...