Vue组件

Vue组件

全局组件定义

四种方式

 //1.Vue.extend()    Vue.component()
         let login = Vue.extend({
             template: '<h1>我们</h1>'
             })
         Vue.component('login', login); //第一个参数展示到页面上的标签名，第二个参数声明的变量
        
 //2.
	       Vue.component('login', {
	       template: '<h1>我们</h1>'
	       })
	       
 //3.
	       Vue.component('login', {
	       template: '#login'
	    })
        <script type="x-template" id="login">
       	 	<h1>登录了</h1>
    	</script>
    
 //4.
        //第一个参数：展示到页面的标签名
        //第二个参数：对象{template:''}
        //script中写入
         Vue.component('mine', {
            template: '#mine'
        })
        
        //在body中写入
	   <template id="mine">
	        <div>
	            我的页面
	        </div>
	    </template>
	    
	    //在#app中写入定义的标签名
	     <mine></mine>

私有组件定义

//与data和methods同级
components: {
                'box': {
                    template: '#mine'
                }
            }
            
//写入body中
 <!-- 不要使用内置或保留的Html元素作为组件id: -->
 <template id="mine">
        <!-- 组件模板应该只包含一个根元素 -->
        <div>
            我的页面
            <div>
                第二个元素
            </div>
            <div>第三个元素</div>
        </div>
    </template>