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.掌握子父传值的方法 ...
随机推荐
- php注册和登陆与数据库的链接
注册和登陆其实是从一个表中进行提取和写入数据 1.(1)先建立一个注册页面 1 2 3 4 5 6 7 8 9 <body> <h1>注册页面</h1&g ...
- thinkphp 目录安全文件
为了避免某些服务器开启了目录浏览权限后可以直接在浏览器输入URL地址查看目录,系统默认开启了目录安全文件机制,会在自动生成目录的时候生成空白的index.html文件,当然安全文件的名称可以设置,例如 ...
- python 识别验证码自动登陆
# python 3.5.0 # 通过Chrom浏览器访问发起请求 # 需要对应版本的Chrom和chromdriver # 作者:linyouyi from selenium import webd ...
- .net API跨域
在webconfig中的节点 <system.webServer> </system.webServer> 下添加 <httpProtocol><custom ...
- lua之table|模块|包
一.table table是 Lua的一种数据结构用来帮助我们创建不同的数据类型,如:数字.字典等. Lua table使用关联型数组,你可以用任意类型的值来作数组的索引,但这个值不能是 ni ...
- NX二次开发-读取图纸表格注释与部件属性关联的名字
NX11+VS2013 #include <uf.h> #include <uf_ui.h> #include <uf_tabnot.h> #include < ...
- IntelliJ + Maven + 内Jetty 实现热部署项目
部署的好处:代码修改后,不必关闭Jetty再重新启动,Maven启动时间不太和谐. 环境: IntelliJ IDEA11.1.4, Maven2.2.1 Jetty8.1.5 步骤: 1,在pom. ...
- Java-Class-I：java.util.Map
ylbtech-Java-Class-I:java.util.Map 1.返回顶部 1.1. import java.util.HashMap; import java.util.Map; 1.2. ...
- SecureCRT是最常用的终端仿真程序，简单的说就是Windows下登录UNIX或Liunx服务器主机的软件,本文主要介绍SecureCRT的使用方法和技巧
SecureCRT是最常用的终端仿真程序,简单的说就是Windows下登录UNIX或Liunx服务器主机的软件,本文主要介绍SecureCRT的使用方法和技巧 VanDyke CRT 和 VanDyk ...
- Delphi中的Sender：TObject对象解析转载
https://blog.csdn.net/jl_tiny/article/details/24376661 Delphi中的Sender:TObject对象解析 procedure TForm1.B ...