<强>一、组件间的数据传递
1。父组件获取子组件的数据
*子组件把自己的数据,发送到父级
* vm。释放美元(事件名,数据);
* v: @
示例用法:当点击发送按钮的时候,“111”变成“我是子组件的数据”
<前> & lt; !DOCTYPE html> & lt; html lang=癳n”比; & lt; head> & lt;元charset=皍tf - 8”比; & lt; title>父级获取子级的数据& lt;/title> & lt;脚本src=" https://www.yisu.com/zixun/bower_components/vue/dist/vue.js "祝辞& lt;/script> & lt; style> & lt;/style> & lt;/head> & lt; body> & lt; div> & lt; aaa> & lt;/aaa> & lt;/div> & lt; template> & lt; span>我是父级→{{味精}}& lt;/span>//自动调用得到的方法,@child-msg和下面的。美元发出(child-msg, this.a)相对应 & lt; bbb @child-msg="得到"祝辞& lt;/bbb> & lt;/template> & lt; template> & lt; h4>子组件& lt;/h4> & lt;输入类型="按钮" value=" https://www.yisu.com/zixun/send " @click=胺⑺汀北? & lt;/template> & lt; script> var vm=new Vue ({ 埃尔:“#箱”, 数据:{ 答:“aaa” }, 组件:{ “aaa”: { 数据:函数(){ 返回{ 味精:111, msg2:“我是父组件的数据的 } }, 模板:“# aaa级”, 方法:{//这里的味精实际上就是子组件传递给父组件的数据 得到:函数(味精){ this.msg=味精; } }, 组件:{ “bbb”: { 数据:函数(){ 返回{ 答:“我是子组件的数据的 } }, 模板:# bbb, 方法:{ 发送:函数(){ 美元。排放(child-msg, this.a); } } } } } } }); & lt;/script> & lt;/body> & lt;/html>2,子组件获取父组件的数据
在调用子组件:
& lt; bbb: m="数据“祝辞& lt;/bbb>
子组件之内:
<前> & lt; !DOCTYPE html> & lt; html lang=癳n”比; & lt; head> & lt;元charset=皍tf - 8”比; & lt; title>自己获取父级的数据& lt;/title> & lt;脚本src=" https://www.yisu.com/zixun/bower_components/vue/dist/vue.js "祝辞& lt;/script> & lt; style> & lt;/style> & lt;/head> & lt; body> & lt; div> & lt; div>{{一}}& lt;/div> & lt; aaa> {{味精}} & lt;/aaa> & lt;/div> & lt; template> & lt; h2> 11111 & lt;/h2> & lt; bbb:嗯=" msg2”: my-msg=拔毒弊４? lt;/bbb> & lt;/template> & lt; script> var vm=new Vue ({ 埃尔:“#箱”, 数据:{ 答:“一个” }, 组件:{ “aaa”: { 数据:函数(){ 返回{ 味精:111, msg2:“我是父组件的数据的 } }, 模板:“# aa级”, 组件:{ “bbb”: { 道具:{ “嗯”:字符串, “myMsg”:数字 }, 模板:“& lt; h4>我是bbb组件→{{嗯}}& lt; br>{{myMsg}} & lt;/h4>” } } } } }); & lt;/script> & lt;/body> & lt;/html>
运行结果:
<强>二,内容分发:
Vue.js提供了一种混合父组件内容与子组件自己模版的方式:槽,用来占一个位置
1,基本用法
<前> & lt; !DOCTYPE html> & lt; html lang=癳n”比; & lt; head> & lt;元charset=皍tf - 8”比; & lt; title>槽保留原来的位置& lt;/title> & lt;脚本src=" https://www.yisu.com/zixun/bower_components/vue/dist/vue.js "祝辞& lt;/script> & lt; style> & lt;/style> & lt;/head> & lt; body> & lt; div> & lt; aaa> & lt; ul> & lt; li> 1111 & lt;/li> & lt; li> 2222 & lt;/li> & lt; li> 3333 & lt;/li> & lt;/ul> & lt;/aaa> & lt; hr> & lt; aaa> & lt;/aaa> & lt;/div> & lt; template> & lt; h2> xxxx & lt; slot>这是默认的情况& lt;/slot> & lt; p>欢迎vue & lt;/template> & lt; script> var vm=new Vue ({ 埃尔:“#箱”, 数据:{ 答:“aaa” }, 组件:{ “aaa”: { 模板:“# aaa” } } }); & lt;/script> & lt;/body> & lt;/html>
