Vuejs组件

全局组件

• 操作流程：

  • 1.组件定义

  • <script>
        // 1.定义全局组件
        Vue.component(
            'global_component',
            {
                template:'<h1>臭宝儿</h1>'
            }
        )
    
        const one = new Vue({
            el: '#one', 
        })
    </script>
    

  • 2,组件使用

  • <div id="one">
        <!-- 1.使用组件 -->
        <global_component></global_component>
    </div>
    

局部组件

• 操作流程

  • 1.组件定义

  • <script>
        // 1.定义局部组件
        var part_component={
                template:'<h1>臭宝儿</h1>'
            }
        
    
        const one = new Vue({
            el: '#one',
            components:{
                haha:part_component,
                hehe:{
                template:'<h1>香宝儿</h1>'
            }
            } 
        })
    </script>
    

  • 2,组件使用

  • <div id="one">
        <!-- 1.使用组件 -->
        <haha></haha>
        <hehe></hehe>
    </div>
    

全局局部嵌套

• 操作流程

  • 1.组件定义：

  • <script>
        //1.定义局部组件
        var part1 = {
            template:'<span>胥荣荣</span>'
        }
        // 1.定义全局组件
        Vue.component(
            'global_component',
            {
                template:'<div>臭宝儿,<part1></part1> </div>',
                components:{part1}
            }
        )
    

• 2,组件使用:

• <div id="one">
      <!-- 1.使用组件 -->
      <global_component></global_component>
  </div>
  

组件data

• 操作流程：

  • 1.组件定义；

    <script>
        // 1.定义全局组件
        Vue.component(
            'global_component',
            {
                template:'<h1>臭宝儿是{{name}}年龄{{are}}</h1>',
                data:function(){
                    return {
                        name:'胥荣荣',
                        are:'19'
                    }
                }
            }
        )
    
        const one = new Vue({
            el: '#one', 
        })
    </script>
    

    • 2,组件使用:

    • <div id="one">
          <!-- 1.使用组件 -->
          <global_component></global_component>
      </div>