ホームページ > 記事 > ウェブフロントエンド > vue.jsのデータ転送・データ配布手順を詳しく解説
今回は、vue.js のデータ転送とデータ配布の手順について詳しく説明します。vue.js のデータ転送とデータ配布の 注意事項 は何ですか? 実際のケースを見てみましょう。
1. コンポーネント間のデータ転送
1. 親コンポーネントが子コンポーネントのデータを取得します
*子コンポーネントは独自のデータを親に送信します
*vm.$emit(イベント名, データ);
*v-on: @
使用例:送信ボタンをクリックすると、「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>
実行結果:
2. コンテンツの配布:
Vue.js は、親コンポーネントのコンテンツと子コンポーネント独自のテンプレートを混合する方法を提供します: スロット、位置を占めるために使用されます
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>
操作結果: ulタグの内容は上書きされていません。 スロットを使用しない場合は、ulタグの内容が上書きされます
。
2. スロットの name 属性
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>
この記事の事例を読んで、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がvue.jsのデータ転送・データ配布手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。