コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > vue.jsでデータ配信スロットを実装する方法

vue.jsでデータ配信スロットを実装する方法

亚连
リリース： 2018-06-11 14:12:21
オリジナル
1696 人が閲覧しました

この記事では、コード例を通じて vue.js データ転送とデータ配布スロットに関する関連知識を分析します。この側面に興味がある友人は参照してください。

1. コンポーネント間のデータ転送

1. 親コンポーネントは子コンポーネントのデータを取得します

*子コンポーネントは自分のデータを親に送信します

*vm.$emit(イベント名, データ) ;

*v-on: @

使用例: 送信ボタンをクリックすると、「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>
<p>
  <aaa>
  </aaa>
</p>
<template>
  <span>我是父级 -> {{msg}}</span>
  //自动调用get方法，@child-msg和下面的this.$emit(&#39;child-msg&#39;,this.a)相对应
  <bbb @child-msg="get"></bbb>
</template>
<template>
  <h3>子组件-</h3>
  <input type="button" value="send" @click="send">
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        data:function(){
          return {
            msg:111,
            msg2:&#39;我是父组件的数据&#39;
          }
        },
        template:&#39;#aaa&#39;,
        methods:{
          //这里的msg实际上就是子组件传递给父组件的数据
          get:function(msg){
            this.msg=msg;
          }
        },
        components:{
          &#39;bbb&#39;:{
            data:function(){
              return {
                a:&#39;我是子组件的数据&#39;
              }
            },
            template:&#39;#bbb&#39;,
            methods:{
              send:function(){
                this.$emit(&#39;child-msg&#39;,this.a);
              }
            }
          }
        }
      }
    }
  });
</script>
</body>
</html>
ログイン後にコピー

2。

子コンポーネント呼び出し時:

サブコンポーネント内: 

props:[&#39;m&#39;,&#39;myMsg&#39;]
props:{
&#39;m&#39;:String,
&#39;myMsg&#39;: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>
<p>
  <p>{{a}}</p>
  <aaa>
    {{msg}}
  </aaa>
</p>

<template>
  <h1>11111</h1>
  <bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;a&#39;
    },
    components:{
      &#39;aaa&#39;:{
        data:function(){
          return {
            msg:111,
            msg2:&#39;我是父组件的数据&#39;
          }
        },
        template:&#39;#aa&#39;,
        components:{
          &#39;bbb&#39;:{
            props:{
              &#39;mmm&#39;:String,
              &#39;myMsg&#39;:Number
            },
            template:&#39;<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>&#39;
          }
        }
      }
    }
  });

</script>
</body>
</html>
ログイン後にコピー

実行結果:

2. コンテンツの配布:

Vue.js 親コンポーネントのコンテンツと子コンポーネントの独自のテンプレートを混合する方法を提供します: スロット、位置を占めるために使用されます

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>
<p>
  <aaa>
    <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
  </aaa>
  <hr>
  <aaa>
  </aaa>
</p>
<template>
  <h1>xxxx</h1>
  <slot>这是默认的情况</slot>
  <p>welcome vue</p>
</template>

<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        template:&#39;#aaa&#39;
      }
    }
  });

</script>
</body>
</html>
ログイン後にコピー

実行結果: ul タグ内のコンテンツは、スロットが使用されていない場合は、ul タグ内の内容が上書きされます

2. スロットの 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>
<p>
  <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>
</p>
<template>　　
  <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:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        template:&#39;#aaa&#39;
      }
    }
  });

</script>
</body>
</html>
ログイン後にコピー

実行結果:

上記は、皆さんのためにまとめたものです。今後皆さんのお役に立てば幸いです。

関連記事:

入力ボックスとドロップダウンボックスの連携を実現する

クリックダウンメニューのコンテンツ同期入力ボックスをJSで実装する

vueでcliを使って再構成を実装する方法複数ページのスキャフォールディングの説明

JS でドラッグしてオブジェクトのサイズを変更する方法

エリアのスクロールの問題に Vue で cli+mui を使用する

Vue のオンライン有料コース (詳細なチュートリアル)

Express と koa の使用の比較 (詳細なチュートリアル)

以上がvue.jsでデータ配信スロットを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
slot vue.js データ転送
ソース：php.cn
前の記事：Vue で ajax を使用するにはどのような方法がありますか? 次の記事：Angular2 を使用してプラグインを統合する方法 (詳細なチュートリアル)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベアラー トークンを処理するために適切なアプリケーション アーキテクチャを選択する OAuth2.0 を使用する API を使用したい つまり、サーバーが私の身元を確認できるように、後続のすべてのリクエストに含める必要があるアクセス トークンを取得する必要がありま...
から 2024-04-04 08:55:57
0
1
353
Vue.js の API プルを作成する 何が問題なのか、なぜこれが機能しないのかわかりません。ランダムな犬の写真 API を機能させたいだけですが、機能しません。以下のコードを参照してください。 exportdefaul...
から 2024-04-03 16:12:29
0
1
363
Vue.jsのデータ値は変更されません cat_pressed というデータと、データ値を変更するこの関数:changeCat(){this.cat_pressed===='brauh'} がありますが、関数を呼び出すた...
から 2024-04-03 09:29:23
0
1
369
Vue.js でゲッターや計算されたプロパティを使用するためのベスト プラクティス 私は vue.js が大好きで、計算プロパティと VueXgetters も大好きです。しかし、私の使用方法がパフォーマンスに何らかの欠点をもたらすかどうかがわからない段階に達しま...
から 2024-04-01 18:22:49
0
1
431
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート