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 动态生成方法的例子
Jul 22 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 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反弹shell实现代码
2009/04/22 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python控制台中实现进度条功能
2015/11/10 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Java及python正则表达式详解
2017/12/27 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python 实现list或string按指定分段
2019/12/25 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
主管职责范文
2013/11/09 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
2014年卫生工作总结
2014/11/27 职场文书
暑期辅导班宣传单
2015/07/14 职场文书