vue-组件的嵌套写法

组件之间的嵌套要将子组件以标签化的形式放在父组件的模板中使用

组件全局

<body>
  <div id="app">
      <Father></Father> 
   <!--  
     直接这么写是不行的  //因为解析到了Father就不会继续执行了
     <Father>
      <Son></Son>
    </Father> 
   -->
  </div>
  <template id="father">
    <div>
      <h3> father </h3>
      <hr>
      <Son/>
    </div>
  </template>
  <template id="son">
    <h5> son </h5>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 组件之间的嵌套要将子组件以标签化的形式放在父组件的模板中使用 */
  Vue.component('Father',{
    template: '#father'
  })
  Vue.component('Son',{
    template: '#son'
  })
  new Vue({
    el: '#app'
  })
</script>

组件局部

<body>
  <div id="app">
      <Father></Father> 
  </div>
  <template id="father">
    <div>
      <h3> father </h3>
      <hr>
      <Son/>
    </div>
  </template>
  <template id="son">
    <h5> son </h5>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 组件之间的嵌套要将子组件以标签化的形式放在父组件的模板中使用 */
  new Vue({
    el: '#app',
    components: {
      'Father': {
        template: '#father',
        components: {
          'Son': {
            template: '#son'
          }
        }
      }
    }
  })
</script>

lt要努力

发布了55 篇原创文章 · 获赞 8 · 访问量 1782

私信关注

vue-组件的嵌套写法

组件全局

组件局部

猜你喜欢