Vue中组件之间数据的传递的示例代码


Posted in Javascript onSeptember 08, 2017

Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的!
如果父组件需要往子组件中传数据,此时应该使用标签属性:

<div id="app">
   <my-compo c="886"></my-compo>
</div>

子组件中,用props声明这个值即可。并且在template里面可以直接使用{{c}}来获得这个属性,而不需要写为{{this.props.c}}

import Vue from "vue";

const MyCompo = Vue.extend({
  template : `
    <div>
      <h1>我是MyCompo组件,我的a值是{{a}}</h1>
      <h1>子组件c:{{c}}</h1>
      <input type="button" value="+++" v-on:click="add"/>
    </div>
  `,
  props : ["c"],
  data : function(){
    return {
      a : 1, 
      b : 2
    }
  },
  methods : {
    add : function(){
      this.a ++;
    }
  }
});

export default MyCompo;

如果父组件中要传一个动态的值(就是父组件的data,不是死数),此时要用v-bind:来传递。
v-bind指令表示动态属性。

<div id="app">
   <my-compo v-bind:c="c"></my-compo>
</div>

此时我们研究,子组件改变了这个值,父组件的值变不变。答:默认情况下不变!

<my-compo v-bind:c="c"></my-compo>

import Vue from "vue";

const MyCompo = Vue.extend({
  template : `
    <div>
      <h1>我是MyCompo组件,我的a值是{{a}},我的c值是:{{c}}</h1>
      <input type="button" value="+++" v-on:click="add"/>

    </div>
  `,
  props : ["c"],
  methods : {
    add : function(){
      this.c ++;
    }
  }
});

export default MyCompo;

子组件的c值变化了,但是外面不变!

也就是说,默认情况下,父组件中的属性值如果传给儿子,子组件改变这个值,仅仅改变子组件中的值,父组件中的值不变。

如果非要让子组件能够改变父组件中的值,要加sync修饰符:

<my-compo v-bind:c.sync="c"></my-compo>

上面的c属性是一个基本类型值常数3。此时我们试试引用类型值。

父组件中增加d属性,值是json。

import Vue from "vue";
import MyCompo from "./components/MyCompo.js";

new Vue({
  el : "#app",
  data : {
    c : 333,
    d : {
      v : 8888
    }
  },
  components : {
    "my-compo" : MyCompo
  }
});

传给子组件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue学习</title>
</head>
<body>
  <div id="app">
    <h1>我是父亲,我的c: {{c}} ,我的d:{{d | json}}</h1>
     <my-compo v-bind:c.sync="c" v-bind:d="d"></my-compo>
  </div>

  <script type="text/javascript" src="public/bundle.js"></script>
</body>
</html>

子组件改变d的时候,父亲也变了!!!虽然我们没加.sync。

总结:

Vue中基本类型值默认单向传递,双向加sync。

引用类型值,默认双向传递。

小tip,v-bind的缩写语法就是冒号。

Vue中组件之间数据的传递的示例代码

属性可以验证类型、必填等等。

props : {
    "c" : null,
    "d" : null,
    "e" : {
      type : Number,
      required : true
    }
},

Vue中组件之间数据的传递的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js操作iframe的一些方法介绍
Jun 25 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
jquery延迟对象解析
Oct 26 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
JavaScript实现开关等效果
Sep 08 #Javascript
浅谈React Native 中组件的生命周期
Sep 08 #Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 #Javascript
关于Ajax的原理以及代码封装详解
Sep 08 #Javascript
vue父子组件的嵌套的示例代码
Sep 08 #Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
You might like
用PHP查询域名状态whois的类
2006/11/25 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
仿微博字符限制效果实现代码
2012/04/20 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
python自动安装pip
2014/04/24 Python
python中的装饰器详解
2015/04/13 Python
Python reduce()函数的用法小结
2017/11/15 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
基于python3的socket聊天编程
2020/02/17 Python
Python txt文件如何转换成字典
2020/11/03 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
.net面试题
2016/09/17 面试题
程序集与命名空间有什么不同
2014/07/25 面试题
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
班主任工作经验材料
2014/02/02 职场文书
品牌转让协议书
2014/08/20 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015年纪委工作总结
2015/05/13 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
python实现简单的井字棋
2021/05/26 Python
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
浅谈Redis缓冲区机制
2022/06/05 Redis