Vue的组件及传参

Vue组件的概念

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

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

根组件

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

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

子组件(局部组件)

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

  1. 定义一个子组件,里面要有template模板,data数据返回,methods局部数据处理等
  2. 定义完成之后要在根组件所在的Vue里面的components写入子组件的名称,才能生效
  1. <script>
  2. let tag = {
  3.         template: `
  4.         <div class="box">
  5.         </div>
  6.         `,
  7. 		//子组件的模板要自己写,写的方式是template:``,这里是两个反引号,就是键盘1左边的那个键,我们在反引号中间写自己想要呈现的组件的样式
  8.         data () {
  9.             return {
  10.                 num: 0
  11.             }
  12.         },
  13. 		//子组件要有自己的数据的局部化处理,这里就是,
  14.         methods: {
  15.             fn() {
  16.                 this.num ++
  17.             }
  18.         },
  19. 		//这里是对局部化后的数据进行操作,是独立于其余的复用组件的
  20.     };
  22. 	new Vue({
  23. 		el: '#app',
  24.         components: {
  25. 		    tag,
  26.         }
  27. 		//关键字为components,子组件在定义完成之后需要在根组件所在的new Vue里面的cmponents里面写入子组件的名称.
  28. 	});
  29. </script>

父组件向子组件传值

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

  1. 数据首先是在父组件里面产生的,然后才传到子组件,顺序不能反
  2. 子组件用props来接收父组件中的值,收到之后就可以在子组件里面当做一个变量来使用
  1. <body>
  2.     <div id="app">
  3.         <div class="wrap">
  4.             <tag v-for="dog in dogs" v-bind:dog="dog" :a="1" :b="2"/>
  5.         </div>
  6.     </div>
  7. </body>
  8. <script src="js/vue.js"></script>
  9. <script>
  10.     let dogs = [{1},{2},{3}]
  11.     let tag = {
  12.         props: ['dog', 'a', 'b', 'z'],
  13.         //子组件内部通过props来接收父组件的传值,这样可以接收父组件里面存在的所有值,只要父组件有,都可以接收,如果父组件里没有,比如z,那么会取到none,也不会报错
  14.         template: `
  15.         <div class="box">
  16. 			<p>{{ dog }}</p>
  17.         </div>
  18.         `,
  19.         data () {
  20.             return {
  21.                 num: 0,
  22.             }
  23.         },
  24.         methods: {
  25.             fn() {
  26.                 this.num ++
  27.             }
  28.         },
  29.     };
  30. 	new Vue({
  31. 		el: '#app',
  32.         data: {
  33. 		    dogs,
  34.         },
  35.         components: {
  36. 		    tag,	//这里证明tag子组件是属于父组件的
  37.         }
  38. 	});
  39. </script>

子组件向父组件传值

以正常逻辑来看,父组件向子组件传值比较常见,也比较符合逻辑,即我们先在父组件里面生成数据,然后子组件从里面取,逻辑没问题,所以如果反过来,子组件向父组件传值,就会存在一些问题,过程也更为繁琐,虽然可以实现,但是实际应用并不太多,因为我们总能够规避这种情况.不过还是有一些场景会用的到,所以我们要了解其具体的传参过程是怎么样的.

子组件向父组件传值的关键字是$emit,用法是要写在子组件的methods中,如下例,该实例所完成的是简单实现一个留言楼,我们可以在input框里面输入内容,点击留言,就会把我们输入的内容加入到下面的留言楼里,每条留言有一个按钮,点击就可以删除该条留言:

  1. <body>
  2.     <div id="app">
  3.         <input type="text" v-model="msg">
  4.         <button @click="send_comment">留言</button>
  5.         <ul>
  6.             <tag v-for="(v, i) in comments" :msg="v" :index="i" @f1="deleteMsg"/>
  7.         </ul>
  8.     </div>
  9. </body>
  10. <script src="js/vue.js"></script>
  11. <script>
  12.     let tag = {
  13.         props: ['msg', 'index'],
  14.         template: `
  15.         <li>
  16.             <i class="d-btn" @click="fn">x</i>
  17.             <b>{{ msg }}</b>
  18.         </li>
  19.         `,
  20.         methods: {
  21.             fn () {
  22.                 // 点击子集，要告诉父级删除第几条数据，也就是传给父级一个index序号的值,因为留言的数组comments在父级中,所以只能由父级来删除留言
  23.                 this.$emit('f1', this.index);
  24.                 //$emit的用法,后面括号里是('父组件接收的方法','传递的数据'),也就是说由父级的f1方法来接收,而f1方法实际调用的是deleteMsg,是定义在父级的methods里面的
  25.             }
  26.         }
  27.     };
  29.     new Vue({
  30.         el: '#app',
  31.         data: {
  32.             msg: '',
  33.             comments:[],
  34.         },
  35.         components: {
  36.             tag,
  37.         },
  38.         methods: {
  39.             send_comment() {
  40.                 if (this.msg) {
  41.                     this.comments.push(this.msg);
  42.                     this.msg = '';
  43.                 }
  44.             },
  45.             deleteMsg(index) {
  46.                 this.comments.splice(index, 1);//这里我们用splice来切割comments数组,splice('开始位置','替换多少位','替换为什么值'),第三个如果为空,就是把前面两个参数定位的数据删除
  47.             }
  48.         }
  49.     })
  50. </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. Python 分布式锁

    1,数据一致性 当多个进程/线程对同一个共享资源读写,会因为资源的争夺而出现混乱,导致数据不一致. 如下图: 在数据库的原始数据是 d0,上图的处理流程如下: t1 时刻,有两个数据源的数据 d1,d ...

  2. PHP rand() 函数

    定义和用法 rand() 函数生成随机整数. 提示:如果您想要一个介于 10 和 100 之间(包括 10 和 100)的随机整数,请使用 rand (10,100). 提示:mt_rand() 函数 ...

  3. NOIp2018集训test-9-7(pm) (联考一day1)

    又被辉神吊打了.今天不仅被辉神李巨吊打,还给基本上给全班垫底了. 看到T3就知道是十进制快速幂,全机房考试的当时应该就我会,结果我tm没找到递推. Orz lyc BM直接水过,Orz wys六个fo ...

  4. row_number() over(partition by a order by b desc) rn 用法

    转载于:http://www.blogjava.net/kxbin/articles/360195.html 可以看看http://jingyan.baidu.com/article/9989c746 ...

  5. Perl 数组应用详解(push, pop, shift, unshift)

    Perl的数组操作有四大常用函数: push:从数组的末尾加入元素.pop :从数组的末尾取出元素 shift: 从数组的开头取出元素unshift:从数组的开头加入元素 1.push #!/usr/ ...

  6. KNN与决策树

    KNN: 就是计算特征之间的距离,某一个待预测的数据分别与已知的所有数据计算他们之间的特征距离,选出前N个距离最近的数据,这N个数据中哪一类的数据最多,就判定待测数据归属哪一类. 假如N=3,图中待测 ...

  7. USACO2005 City Skyline /// oj23401

    题目大意: Input * Line 1: Two space separated integers: N and W * Lines 2..N+1: Two space separated inte ...

  8. D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...

  9. JDBC_数据库连接池DRUID

    /** * @Description: TODO(这里用一句话描述这个类的作用) * @Author aikang * @Date 2019/8/26 20:12 */ /* 1.数据库连接池: 1. ...

  10. --master-data 的作用

    Use this option to dump a master replication server to produce a dump file that can be used to set u ...