Vue的组件及传参

Vue组件的概念

我们首先要知道组件的概念,实际上每一个组件都是一个vue实例,也就是我们之前所生成的new Vue({}),组件有以下几个特点:

  1. 每个组件要有自己的template模板,根组件的模板就是我们在定义Vue的时候挂载点所在的那个大标签,
  2. 每个组件的模板只能有一个跟标签,这点很重要,就是说不管是根组件还是子组件,其模板template里面都不能包含多于一个的跟标签
  3. 子组件的数据有其自己的作用域,所以我们在定义子组件的时候要对其数据做局部化处理,以达到对组件复用之后数据独立的效果,即用data(){}来返回其数据,返回的数据应该是子组件自身绑定方法的返回值,并以字典的方式返回

根组件

上文中已经说过,根组件的定义非常简单

<script>
let app = new Vue({
el:'#app', //根组件的template模板其实就是挂载的这个标签的所有内容
data:{
msg:"根组件"
},
})
</script>

子组件(局部组件)

子组件的定义方式就比根组件要麻烦一些,具体如下:

  1. 定义一个子组件,里面要有template模板,data数据返回,methods局部数据处理等
  2. 定义完成之后要在根组件所在的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>

父组件向子组件传值

父组件向子组件传值的前提是,该子组件是属于该父组件的,不能向并不属于自己的子组件传值,另外,父组件向子组件传值的时候,要注意以下几点:

  1. 数据首先是在父组件里面产生的,然后才传到子组件,顺序不能反
  2. 子组件用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的组件及传参的更多相关文章

  1. vue 父子组件相互传参

    转自https://blog.csdn.net/u011175079/article/details/79161029 子组件: <template> <div> <di ...

  2. vue父子组件路由传参的方式

    一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...

  3. vue 父子组件之间传参

    父组件中有子组件 msg 为父组件向子组件传的内容,  子组件向父组件传参数 子组件:this.$emit("shownumber",[this.num]);//this.$emi ...

  4. 前台VUE的组件之间传参方式

    路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name}}& ...

  5. 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

    父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  6. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

  7. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  8. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  9. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

随机推荐

  1. 异或空间求基(模板)——hdu3949

    输出样例有点问题的.. #include<bits/stdc++.h> using namespace std; #define ll unsigned long long #define ...

  2. springmvc静态资源;mvc:default-servlet-handler后Controller失效

    springmvc静态资源;mvc:default-servlet-handler后Controller失效 web.xml配置<url-pattern>/</url-pattern ...

  3. JVM内核-原理、诊断与优化学习笔记(八):JAVA堆分析

    文章目录 内存溢出(OOM)的原因 在JVM中,有哪些内存区间? 堆溢出 永久区 Java栈溢出 直接内存溢出 小问题? MAT使用基础 柱状图显示 支配树 显示线程信息 显示堆总体信息,比如消耗最大 ...

  4. 2019 牛客多校第五场 B generator 1

    题目链接:https://ac.nowcoder.com/acm/contest/885/B 题目大意 略. 分析 十进制矩阵快速幂. 代码如下 #include <bits/stdc++.h& ...

  5. xml初步,DTD和Schema约束

    XML 可扩展的标记语言(!!!可扩展) 作用 1.存放数据 2.配置文件 语法 文档声明 <?xml version="1.0" encoding="UTF-8& ...

  6. 天道神诀---DHCP服务(下篇)

    DHCP作用域详解 subnet  定义一个作用域 netmask  定义作用域的掩码 range  允许发放的IP范围 option routers 指定网关地址 option domain-nam ...

  7. jdbc加载驱动方法

    1.Class.forName("com.mysql.jdbc.Driver"); 2. DriverManager.registerDriver(new com.mysql.jd ...

  8. shell 命令 用户管理

     1. 查看保存用户相关信息的文件 [ cat /etc/passwd ]  [linux    :    x    :   1000  :   1000   :   linux,,,   :    ...

  9. JQuery,JS图片操作(上一张,下一张,旋转,放大,缩小)

    1.html代码:我是从数据库获取图片路径. <div id="divprint" align="center"> @{DataTable dt = ...

  10. 2019.2.23VScode的c++配置详细方法

    根据个人经验,最新的c++配置方法. 主要的步骤: 安装Vscode 在Vscode类安装c++插件 安装编译调试环境 修改Vscode配置文件. 安装Vscode的步骤省略 如何配置Vscode中文 ...