Vue组件

1.创建组件的方式

（1）直接定义template

Vue.component('myCom', {
   template: '<h3>这是直接在js中定义的模板</h3>'
})

注：如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接。如上面就可以使用<myCom></myCom1>引进组件。

      不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素。

（2）直接在html区域定义template，然后使用Vue.component引入。

<template id="tmp">
	<h3>我是使用模板引入的标签</h3>
</template>

Vue.component('tmp', Vue.extend({
	template:'#tmp'
}));

注意：Vue提供了 component ,来展示对应名称的组件。

           component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称。如<component :is="login"></component>

 

2.  父组件向子组件传值和方法

（1）父组件向子组件传值---props

    在组件模板对象中添加props属性，props属性值为一个数组。同时在html页面中引入组件时，需要在该组件上绑定一个属性，属性绑定的值为父组件的一个数据变量。

var login={
	template:"#tmp",
	props:[parMsg],//在html页面中引入login组件时，需要绑定parMsg属性，
                    //如：<login v-bind:parMsg="父组件数据"></login>
	data:function(){
	    return {
			chdMsg:'子组件消息'
		}
	}
}

（2）父组件向子组件传递方法

父组件向子组件传递 方法，使用的是 事件绑定 机制； v-on。当我们需要在子组件中调用父组件的方法时，我们在引入组件事需要绑定事件，然后在组件的内部触发这个事件。比如

<login @func="showMsg"></login>

var login={
	template:"#tmp",
	data:function(){
		return {
			chdMsg:'子组件消息'
		}
	},
	methods:{
		myclick(){
			this.$emit('func');//触发自定义事件func
		}
	}
}

3. vue中获取DOM元素和组件

给DOM元素或组件设置ref属性，然后再VUE实例中使用this.$refs.属性值即可获取到DOM元素或者组件。

<input type="button" value="父组件的按钮" ref="ipt">

this.$refs.ipt即可获取到input元素