Vue中组件数据的传递

news/2024/9/9 13:33:41

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的缩写语法就是冒号。
图片描述
属性可以验证类型、必填等等。

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

图片描述


http://lihuaxi.xjx100.cn/news/239573.html

相关文章

计算机常用压缩软件有哪些,电脑压缩软件哪个好推荐

压缩软件是办公人士再熟悉不过的软件了&#xff0c;一般我们常见到的压缩包基本上都是需要使用解压缩软件来进行打包或者解压的。市面上的压缩软件有收费也有免费的&#xff0c;可是作为小白的我们该如何选择电脑压缩软件&#xff0c;压缩软件哪个好你知道吗&#xff1f;电脑压…

微博polg什么意思_贾磊:广东发微博给CBA造成了负面影响 方硕的意思可能没表达清楚...

直播吧11月5日讯 近日做客一档节目时&#xff0c;著名篮球记者贾磊谈到了前天晚上的京粤大战。贾磊谈到了王骁辉伸腿绊倒威姆斯一事&#xff1a;“我觉得这场比赛&#xff0c;王骁辉的这个动作&#xff0c;大家都看的非常清楚&#xff0c;确实是一个犯规&#xff0c;也给威姆斯…

愉快的舞会c++_如何在5分钟内建立一个令人愉快的加载屏幕

愉快的舞会cFirst, here is what we will build. Set your timer!首先&#xff0c;这是我们将要建立的。 设置您的计时器&#xff01; Does this look familiar?这看起来很熟悉吗&#xff1f; If yes, that’s because you’ve seen this somewhere — Slack!如果是&#xf…

https简单配置

SSL会话过程&#xff08;1&#xff09;客户端发送可供选择的加密方式&#xff0c;并向服务器请求证书&#xff08;2&#xff09;服务器端发送证书以及选定的加密方式给客户端&#xff08;3&#xff09;客户端取得证书并进行证书验证&#xff1b;如果新人给其发证书的CA&#xf…

HTML5 监听当前位置

2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>监听当前位置</title><meta name"viewport" content"widthdevice-width, initial-scale1,…

战地1如何修改服务器地址,《战地1》服务器加入方法一览

《战地1》发布已经有一段时间了&#xff0c;今天小编要为大家带来的是玩家“黑肉佐罗”分享的《战地1》服务器加入方法一览&#xff0c;感兴趣的玩家赶紧一起来看看吧!战地风云系列正统续作战地1问世已经有几个礼拜了&#xff0c;游戏怎么样&#xff0c;我想也不用多说&#xf…

im和音视频开发哪个更好_如何阅读成为更好的开发者的方式

im和音视频开发哪个更好by nolan grace通过诺兰格雷斯 如何阅读成为更好的开发者的方式 (How to read your way to becoming a better developer) If you want to get better at programming, there are two things you need to do:如果您想提高编程水平&#xff0c;则需要做两…

wifi虚拟服务器怎么设置方法,新版tplink路由器虚拟服务器(端口映射)设置教程

在本文中&#xff0c; 主要给大家介绍新版tplink路由器虚拟服务器的设置方法。虚拟服务器设置&#xff0c;通常又叫做&#xff1a;端口映射设置、端口转发设置等。虽然这个功能普通用户一般用不到&#xff0c;但是偶尔也有用户问起&#xff0c;所以还是简单的介绍下。一、虚拟服…