Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用角作比喻,组件的范围天生是范围:()的!
如果父组件需要往子组件中传数据,此时应该使用标签属性:
& lt; div id=坝τ谩北?
& lt; my-compo c=" 886 "祝辞& lt;/my-compo>
& lt;/div>
子组件中,用道具声明这个值即可。并且在模板里面可以直接使用{{c}}来获得这个属性,而不需要写为{{this.props.c}}
从“进口Vue Vue”;
const MyCompo=Vue.extend ({
模板:
& lt; div>
& lt; h2>我是MyCompo组件,我的一个值是{{一}}& lt;/h2>
& lt; h2>子组件c: {{c}} & lt;/h2>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+ + +”v:单击=疤砑印?比;
& lt;/div>
`，
道具:[c],
数据:函数(){
返回{
答:1,
b: 2
}
},
方法:{
添加:函数(){
这一点。+ +;
}
}
});
出口默认MyCompo;
之前
如果父组件中要传一个动态的值(就是父组件的数据,不是死数),此时要用v-bind:来传递。
v-bind指令表示动态属性。
& lt; div id=坝τ谩北?
& lt; my-compo v-bind: c=" c "祝辞& lt;/my-compo>
& lt;/div>
之前
此时我们研究,子组件改变了这个值,父组件的值变不变。答:默认情况下不变。
& lt; my-compo v-bind: c=" c "祝辞& lt;/my-compo>
从“进口Vue Vue”;
const MyCompo=Vue.extend ({
模板:
& lt; div>
& lt; h2>我是MyCompo组件,我的一个值是{{一}},我的c值是:{{c}} & lt;/h2>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+ + +”v:单击=疤砑印?比;
& lt;/div>
`，
道具:[c],
方法:{
添加:函数(){
这一点。c++;
}
}
});
出口默认MyCompo;
之前
子组件的c值变化了,但是外面不变。
也就是说,默认情况下,父组件中的属性值如果传给儿子,子组件改变这个值,仅仅改变子组件中的值,父组件中的值不变。
如果非要让子组件能够改变父组件中的值,要加同步修饰符:
& lt; my-compo v-bind: c.sync=" c "祝辞& lt;/my-compo>
上面的c属性是一个基本类型值常数3。此时我们试试引用类型值。
父组件中增加d属性,值是json。
从“进口Vue Vue”;
从“。/组件/导入MyCompo MyCompo.js”;
新Vue ({
埃尔:“#应用”,
数据:{
c: 333年,
d: {
v: 8888
}
},
组件:{
“my-compo”: MyCompo
}
});
之前
传给子组件:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue学习& lt;/title>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; h2>我是父亲,我的c: {{c}},我的d: {{d | json}} & lt;/h2>
& lt; my-compo v-bind: c。同步=" c " v-bind: d=癲”祝辞& lt;/my-compo>
& lt;/div>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/public/bundle.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
之前
子组件改变d的时候,父亲也变了! ! !虽然我们没加。同步。
<强>总结:
Vue中基本类型值默认单向传递,双向加同步。
引用类型值,默认双向传递。
小提示,v-bind的缩写语法就是冒号。
属性可以验证类型,必填等等。
道具:{
“c”:空,
“d”:空,
" e ": {
类型:数字,
要求:真正的
}
},
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
