注册组件的语法
Vue.component('component-name',{
data: function(){
return {}
},
props:[]
,
methods:{
},
computed:{
}
});
因为组件是可复用的Vue实例，所以它们与new Vue接收相同的选项，例如：data、computed、watch、methods以及生命周期钩子等。
另外需要注意的是：
data选项必须是一个函数，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。
组件注册
“
为了能在模板中使用，这些组件必须先注册，以便Vue能够识别。这里有俩种组件的注册类型：
全局注册和局部注册。
”
全局注册： Vue.component() //这种方式是全局注册。
//全局注册的组件可以用在其被注册之后的任何通过new Vue新创建的Vue根实例，也包括其组件树中的所有子组件的模板中。
使用组件
在你使用组件时，每个组件都是独立的。因为你每用一次组件，就会有一个它的新实例被创建。
-示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue稳定版本-->
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<!--
-->
<!--组件component-->
<div id="app">
<!--使用组件-->
<button-counter></button-counter>
</div>
<script>
//注册一个组件
Vue.component("button-counter",{
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">你已经点击{{count}}次</button>'
});
var vue=new Vue({
el:'#app',
data:{
message: ''
},
methods:{
getInputValue: function (param) {
console.info(param)
alert("获取到的单选框的值是： "+param);
}
}
});
</script>
</body>
</html>
运行结果：
运行结果
