Vue.js のコンポーネント間の通信 - 動的プロパティ転送

今回は、Vue.js のコンポーネント間の通信 - 動的 プロパティ転送、Vue.js コンポーネント間の通信 - 動的属性転送の 注意事項 について説明します。実際のケースを見てみましょう。 。

フォームの内容はサブコンポーネントに動的に表示されます

<template>
  <div>
    <input>
    <com-a></com-a>
  </div></template><script>
  import ComA from &#39;./components/a.vue&#39;
  export default {    components: {
      ComA
    },
    data () {      return {        myVal: &#39;&#39;
      }
    }
  }</script>

サブコンポーネントa.vue

<template>
  <div>
    {{hello}}
    {{ myValue }}  </div></template><script>
  export default {//    声明number属性//    未指定类型//    props: [&#39;number&#39;],//    指定类型
    props: {      &#39;my-value&#39;: [Number, String]
    },
    data () {      return {        hello: &#39;I am componnet a&#39;
      }
    }
  }</script>

コンポーネント間の通信 - 動的属性転送

スロット
サブコンポーネントにテンプレートを渡します

<com-a :my-value="myVal">
      <p>我是一个插槽</p>
      <span>123456</span></com-a>

com-a コンポーネント内

<template>
  <div class="hello">
    {{hello}}
    {{ myValue }}
  //给插槽设置默认值    <slot>no slot</slot>
  </div></template>

渡されたスロットにコンテンツがない場合、空になります

<com-a :my-value="myVal"></com-a>

スロットのデフォルト値を設定

<slot>no slot</slot>

して表示します

名前付きスロット

<template>  <div id="myapp">
    <!--具名插槽-->
    <com-a :my-value="myVal">
      <p slot="header">xxxx header</p>
      <p slot="footer">yyyy footer</p>
    </com-a>
  </div></template>

com-a

コンポーネントでの実行結果:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトその他を参照してください。関連記事！

推奨読書:

Vue.js イベント バインディング - フォーム イベント バインディング

Vue.js vue タグ属性と条件付きレンダリング

以上がVue.js のコンポーネント間の通信 - 動的プロパティ転送の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。