vue.js之數據傳遞和數據分發slot
阿新 • • 發佈：2018-01-20
itl utf-8 div str round pla 沒有 his width
一、組件間的數據傳遞
1.父組件獲取子組件的數據
*子組件把自己的數據，發送到父級
*vm.$emit(事件名,數據);
*v-on: @
示例用法：當點擊send按鈕的時候，“111”變成“我是子組件的數據”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父級獲取子級的數據</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </style> </head> <body> <div id="box"> <aaa> </aaa> </div> <template id="aaa"> <span>我是父級 -> {{msg}}</span> //自動調用get方法，@child-msg和下面的this.$emit(‘child-msg‘,this.a)相對應 <bbb @child-msg="get"></bbb> </template> <template id="bbb"> <h3>子組件-</h3> <input type="button" value="send" @click="send"> </template> <script> var vm=new Vue({ el:‘#box‘, data:{ a:‘aaa‘ }, components:{‘aaa‘:{ data:function(){ return { msg:111, msg2:‘我是父組件的數據‘ } }, template:‘#aaa‘, methods:{ //這裏的msg實際上就是子組件傳遞給父組件的數據 get:function(msg){ this.msg=msg; } }, components:{ ‘bbb‘:{ data:function(){ return { a:‘我是子組件的數據‘ } }, template:‘#bbb‘, methods:{ send:function(){ this.$emit(‘child-msg‘,this.a); } } } } } } }); </script> </body> </html>
2、子組件獲取父組件的數據
在調用子組件：
<bbb :m="數據"></bbb>
子組件之內:
props:[‘m‘,‘myMsg‘]
props:{
‘m‘:String,
‘myMsg‘:Number
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自己獲取父級的數據</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </style> </head> <body> <div id="box"> <div>{{a}}</div> <aaa> {{msg}} </aaa> </div> <template id="aa"> <h1>11111</h1> <bbb :mmm="msg2" :my-msg="msg"></bbb> </template> <script> var vm=new Vue({ el:‘#box‘, data:{ a:‘a‘ }, components:{ ‘aaa‘:{ data:function(){ return { msg:111, msg2:‘我是父組件的數據‘ } }, template:‘#aa‘, components:{ ‘bbb‘:{ props:{ ‘mmm‘:String, ‘myMsg‘:Number }, template:‘<h3>我是bbb組件->{{mmm}} <br> {{myMsg}}</h3>‘ } } } } }); </script> </body> </html>
運行結果：
二、內容分發：
Vue.js提供了一種混合父組件內容與子組件自己模版的方式:slot，用來占一個位置
1、基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slot保留原來的位置</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </style> </head> <body> <div id="box"> <aaa> <ul> <li>1111</li> <li>2222</li> <li>3333</li> </ul> </aaa> <hr> <aaa> </aaa> </div> <template id="aaa"> <h1>xxxx</h1> <slot>這是默認的情況</slot> <p>welcome vue</p> </template> <script> var vm=new Vue({ el:‘#box‘, data:{ a:‘aaa‘ }, components:{ ‘aaa‘:{ template:‘#aaa‘ } } }); </script> </body> </html>
運行結果：ul標簽裏面的內容沒有被覆蓋，如果不使用slot,ul標簽裏的內容將會被覆蓋
2、slot的name屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slot中name屬性的使用</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </style> </head> <body> <div id="box"> <aaa> <ul slot="ul-slot"> //這裏slot的名字要與下面slot中name屬性相對應 <li>1111</li> <li>2222</li> <li>3333</li> </ul> <ol slot="ol-slot"> //用法同上 <li>111</li> <li>222</li> <li>333</li> </ol> </aaa> <hr> <aaa> </aaa> </div> <template id="aaa"> <h1>xxxx</h1> <slot name="ol-slot">這是默認的情況</slot> //設置name屬性，給slot命名 <p>welcome vue</p> <slot name="ul-slot">這是默認的情況2</slot> </template> <script> var vm=new Vue({ el:‘#box‘, data:{ a:‘aaa‘ }, components:{ ‘aaa‘:{ template:‘#aaa‘ } } }); </script> </body> </html>
運行結果：
vue.js之數據傳遞和數據分發slot