Vue组件

叁歲伎倆 2021-09-27 13:56 442阅读 0赞

### 为什么使用组件 ###

JavaScript能力的复用。Vue.js的组件提高重复性，让代码可以复用。

### 组件的用法 ###

组件在使用前先需要注册。注册分为两种方式：**全局注册**和**局部注册。**全局注册后，任何vue都可以使用。全局注册代码：

Vue.component('my-component',{
    
        template : '<div>这是一个组件</div>'
    })

my-component就是注册的自定义标签名称，推荐使用小写 + 、-  来分割形式命名

局部注册：使用components选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。这样可以使组件可以嵌套

<div id="app">
    		<my-component></my-component>
    		<my-componenttwo></my-componenttwo>
    </div>
    
    	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script type="text/javascript">
    	
    		Vue.component('my-component',{
    			template : '<div>这是一个组件</div>'
    		});
    		
    		var child = {
    				template:'<div>这是一个子组件</div>'
    		};
    	
    		new Vue({
    			el:"#app",
    			components:{
    				'my-componenttwo':child
    			}
    		});
    	
    </script>

Vue组件在某些情况下会受到HTML的限制，比如在<table>标签下只能有<th>、<tr>....那么这时候我们可以使用特殊的is属性来进行挂载。  eg:如果使用的是字符串模板的时候，是不会被限制的。

Vue除了可以使用template选项外，还可以像Vue实例那样使用其他的选项，比如，data、compputed、methods等。使用data的时候与实例有所差别、组件使用data的情况是函数的形式。

Js对象是引用的关系，如果你在外部引用了一个对象，那么这个对象就是共享的，任何一方修改都会被同步的。

举个例子

<div id="app">
    		<my-component></my-component>
    		<my-component></my-component>
    		<my-component></my-component>
    	</div>
    
    	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    	
    	
    	<script type="text/javascript">
    		var shuju = {
    			counter : 0
    		};
    	
    		Vue.component('my-component',{
    			template : '<button @click="counter++">{
       {counter}}</button>',
    			data:function(){
    				return shuju;
    			}
    		});
    
    		new Vue({
    			el:"#app",
    		});
    	
    	</script>

如果想正确的处理  应该把shuju这个变量放在data function()\{\}函数下边。