欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue slot 在子組件中顯示父組件傳遞的模板

 更新時間：2018年03月02日 10:58:58   作者：阿豪boy  
這篇文章主要介紹了vue slot 在子組件中顯示父組件傳遞的模板,需要的朋友可以參考下

父組件使用沒有指定slot屬性，默認(rèn)為default

在slot中可以使用默認(rèn)值，如果父組件沒有傳遞對應(yīng)的slot，則會顯示默認(rèn)值

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <div id="app">
    <modal>
      <!-- 調(diào)用父組件的方法 -->
      <h1 @click='click'>aaa</h1></modal>
    <modal>
      <h2>bbb</h2></modal>
    <modal>
      <!-- 使用slot設(shè)置模板中的名字,會插入到指定的slot中 -->
      <p slot='title'>hello</p>
      <p slot='content'>
        world
      </p>
    </modal>
    <modal></modal>
  </div>
  <template id="modal">
    <!-- 使用slot在子組件中顯示父組件傳過來的模板 -->
      <div>
        modal
        <slot name='default'>如果沒有會使用這個默認(rèn)值</slot>
      <h1>
        title:
        <slot name='title'>
        </slot>
      </h1>
      content:
      <slot name='content'></slot>
      </div>
    </template>
  <script type="text/javascript">
    let modal = {
      template: '#modal'
    }
    new Vue({
      el: '#app',
      components: {
        // es 簡寫 ，只寫一個的意思為
        // modal:modal
        modal
      },
      methods: {
        click() {
          console.log('aaa')
        }
      }
    })
  </script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的vue slot 在子組件中顯示父組件傳遞的模板，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論