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>

元件之間的通信- 動態屬性傳遞

插槽slot
向子元件傳遞一個範本

<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>

則顯示

具名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中文網其它相關文章！

推薦閱讀：

Vue.js的事件綁定-表單事件綁定

Vue.js的vue標籤屬性與條件渲染

#

以上是Vue.js的元件之間通訊- 動態屬性傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章！