這次帶給大家vue.js的資料傳遞與資料分發步驟詳解,vue.js資料傳遞與資料分發的注意事項有哪些,以下是實戰案例,一起來看一下。
一、元件間的資料傳遞
# 1.父元件取得子元件的資料
# *子元件把自己的數據,送到父級
*vm.$emit(事件名,資料);
# *v-on: @
範例用法:當點擊send按鈕的時候,「111」變成「我是子元件的資料」
nbsp;html> <meta> <title>父级获取子级的数据</title> <script></script> <style> </style> <p> <aaa> </aaa> </p> <template> <span>我是父级 -> {{msg}}</span> //自动调用get方法,@child-msg和下面的this.$emit('child-msg',this.a)相对应 <bbb></bbb> </template> <template> <h3>子组件-</h3> <input> </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>
2、子元件取得父元件的資料
# 在呼叫子元件:
# 子組件之內:
props:['m','myMsg'] props:{ 'm':String, 'myMsg':Number }
nbsp;html> <meta> <title>自己获取父级的数据</title> <script></script> <style> </style> <p> </p><p>{{a}}</p> <aaa> {{msg}} </aaa> <template> <h1>11111</h1> <bbb></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}}' } } } } }); </script>
# 二、內容分發:
# Vue.js提供了一個混合父元件內容與子元件自己模版的方式:slot,用來佔一個位置# 1.基本用法nbsp;html> <meta> <title>slot保留原来的位置</title> <script></script> <style> </style> <p> <aaa> <ul> <li>1111</li> <li>2222</li> <li>3333</li> </ul> </aaa> </p><hr> <aaa> </aaa> <template> <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>
#
nbsp;html> <meta> <title>slot中name属性的使用</title> <script></script> <style> </style> <p> <aaa> <ul> //这里slot的名字要与下面slot中name属性相对应 <li>1111</li> <li>2222</li> <li>3333</li> </ul> <ol> //用法同上 <li>111</li> <li>222</li> <li>333</li> </ol> </aaa> </p><hr> <aaa> </aaa> <template> <h1>xxxx</h1> <slot>这是默认的情况</slot> //设置name属性,给slot命名 <p>welcome vue</p> <slot>这是默认的情况2</slot> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ template:'#aaa' } } }); </script>
以上是vue.js的資料傳遞與資料分發步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!