1.简单的vue组件使用
组件可分为全局组件和局部组件；
全局组件用Vue.component方法来指定；
局部组件在新建Vue实例时用components属性来指定，只能被父组件使用；
组件创建时需要指定组件名和组件属性；
通过组件名作标签可以直接引用组件；例如：global作为组件定义时的名字；在引用该组件时用标签<global></global>;
组件创建时可以用props属性来和父组件进行值的交互；用template属性来指定组件模板；
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件测试</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--使用全局组件-->
<global prop1="组件值1" prop2="组件值2"></global>
<!--使用局部组件-->
<local></local>
</div>
<script>
//新建一个全局组件
//用Vue的component(组件名,组件配置)方法；
Vue.component(
"global",
{
props:["prop1","prop2"],
template:"<h1>全局组件测试【{{prop1}}】【{{prop2}}】</h1>"
}
);
//新建vue实例
var vm=new Vue({
el:"#app",
//局部组件
components:{
local:{
template:"<h2>局部组件测试</h2>"
}
}
});
</script>
</body>
</html>
运行结果：
