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 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
element多个表单校验的实现
May 27 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高手需要要掌握的知识点
2014/08/21 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python修改注册表终止360进程实例
2014/10/13 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
违纪检讨书2000字
2014/02/08 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js
MySQL的存储过程和相关函数
2022/04/26 MySQL
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS