vue中组件占位 is属性的使用

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>

 

<body>
  <div id="app">
    <!-- 配合is属性使用的标签只是一个占位符，不会渲染到页面 -->
    <h2 is="custom-component"></h2>
    <!-- 
      select标签中只能出现option标签
      ul,ol标签中只能出现li标签
      thead,tbody标签中只能出现tr标签
      dl标签中只能出现dt和dd标签
     -->

 

    <select>
      <!-- 无效 -->
      <!-- <option-component></option-component> -->

 

      <!-- 需要使用option做占位符，is指定组件名称 -->
      <option is="option-component"></option>
    </select>

 

    <ul>
      <!-- <li is="li-component"></li> -->
      <!-- <li-component></li-component> -->
    </ul>
  </div>

 

  <script>
    Vue.component('custom-component', {
      template: `
        <div>这是一个自定义组件</div>
      `
    })
    Vue.component('option-component', {
      template: `
        <option>这是一个option组件</option>
      `
    })
    Vue.component('li-component', {
      template: `
        <li>这是一个li组件</li>
      `
    })
    new Vue({
      el: '#app'
    })
  </script>
</body>

 

</html>
 
执行结果：

 

 

posted @ 2020-11-25 19:52  你真有趣  阅读(1535)  评论(0)    收藏  举报