一。组件
把页面中通用的部分做成组件，减低开发成本
先定义组=====> 再注册组件 ===========> 再组件通信
①定义组件
语法： 注意组件中data是一个函数
// 定义组件
const 组件对象 = {
// 渲染模板
template : ``,
// 组件数据 (必须是一个函数)
data : function () {
return {
}
},
// 组件属性
props : {
},
// 计算属性
computed : {
},
// 方法
methods : {
},
// 监控属性
watch : {
},
// 生命周期钩子
created (){
}
};
使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs定义组件</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
// 定义组件
const MyButton = {
// 渲染模板
template : `<button @click="calc()">你点击了: {{num}}次！</button>`,
// 组件数据 (必须是一个函数)
data : function () {
return {
num: 1
}
},
// 方法
methods : {
calc : function () {
this.num++;
}
}
};
// 创建Vue实例
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象
}
});
</script>
</body>
</html>
扩展：对于组件名，有两种写法
一种是 ：zu-jian
一种是 ： ZuJian
但是，无论哪种，再使用组件的时候都是用<zu-jian />
②注册组件
分为：全局组件和局部组件
全局组件： Vue.component('组件名称', 组件对象);
局部组件： 只能在当前的Vue实例中可以使用。
components : {
"my-button" : MyButton
}
③组件通信
第一种：父组件向子组件通信：----------------通过 Prop 向子组件传递数据------通过传递属性来进行通信 (在子组件中定义父组件需要传递的属性)