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.掌握子父传值的方法 ...
随机推荐
- Dart编程循环
有时,某些指令需要重复执行.循环是一种理想的方法.循环表示必须重复的一组指令.在循环的上下文中,重复被称为迭代 . 下图说明了循环的分类 让我们开始讨论确定循环.迭代次数是确定/固定的循环称为确定循环 ...
- 阿里巴巴IPv6应用平台引领下一代互联网
摘要: 据预测,到2020年底我国IPv6终端设备将达到5亿,正在快速取代IPv4.阿里巴巴网络架构师张先国先生在2018 年GNTC 大会IPv6 专场上分享IPv6应用集团业务(支付宝.淘宝.天猫 ...
- cdh maven仓库地址
常用的maven仓库地址: 中央库:http://repo.maven.apache.org/maven2/ cdh库:https://repository.cloudera.com/artifact ...
- NX二次开发-UFUN输出UF函数使用错误UF_get_fail_message
#include <uf.h> #include <uf_ui.h> #include <uf_modl.h> UF_initialize(); UF_FEATUR ...
- NX二次开发-获取工程图尺寸的值UF_DRF_ask_dim_info
UF_initialize(); //遍历所有尺寸 ; tag_t DimTag = NULL_TAG; UF_OBJ_cycle_objs_in_part1(UF_PART_ask_display_ ...
- NX二次开发-创建旋转UF_MODL_create_revolved
NX9+VS2012 #include <uf.h> #include <uf_curve.h> #include <uf_modl.h> UF_initializ ...
- Windows内核驱动开发入门学习资料
声明:本文所描述的所有资料和源码均搜集自互联网,版权归原始作者所有,所以在引用资料时我尽量注明原始作者和出处:本文所搜集资料也仅供同学们学习之用,由于用作其他用途引起的责任纠纷,本人不负任何责任.(本 ...
- Delphi常用字符串函数
Delphi常用字符串函数 一.字符转换函数1.ord(input[i])返回字符表达式 input 左端起第 I 字符的ASCII 码值.2.CHAR()将ASCII 码转换为字符.如果没有输入 ...
- prettier包升级后vue项目运行报错
今天用vue-cli新建vue项目的时候,发现项目怎么都跑不起来. 最后通过与以前项目作比较,发现prettier这个依赖的版本从原来的1.12.0升级成了1.13.1.我也不太清楚为什么升级后项目跑 ...
- MySQL 不用 Null 的理由
Null 貌似在哪里都是个头疼的问题,比如 Java 里让人头疼的 NullPointerException,为了避免猝不及防的空指针异常,千百年来程序猿们不得不在代码里小心翼翼的各种 if 判断,麻 ...