目录
1. 什么是组件
组件，组合起来的部件，可以简单理解为组成一个应用的“零件”。一个应用，是由多个组件构成的。而且组件还可以包含组件。
-
包含组件的，就是父组件。
-
被包含的组件，就是子组件。
-
父组件使用子组件。
-
每个组件都有 template 。
入口：通过入口，可以看到更广袤的天地。程序中的入口，通过简短的代码可以调用更复杂的代码（函数其实就是典型的入口）。Vue 中，入口也属于组件。
2. 创建组件
1. 创建组件对象。本质就是一个 Object 对象。
let Myheader = {
template: `模版`
data: 是一个函数,返回了object对象。
methods: 功能函数
components: 子组件们
};2. 在父组件中，需要声明 使用的组件：components:{ 组件名：组件对象名 }
3. 在父组件中，template 模版中，要用到组件的地方，使用 <组件名></组件名>
建议命名方式，举例：
-
声明时组件名 Myheader
-
components 使用时 my-header
// 声明头部板块组件对象。本质就是一个 Object对象
// （子）组件的 template 必须有一个根标签。根标签可以是 div，header之类的。
let Myheader = {
template:`
<div class="myheader">
这个是头部内容{
{ headerData }}
</div>`,
data:function(){
return {
headerData:"my header"
}
}
};
// 声明入口组件。习惯性的，组件名首字母大写。
// template 中可以使用单标签形式，也可以使用双标签形式。取决于是否在里面传值。
let App = {
components:{ // 声明子组件们。要用到哪些组件。
// key 是组件名，value 是组件对象
'my-header':Myheader
},
// template中，子组件要用 标签<> 的形式添加。
template:`
<div>
<my-header></my-header>
</div>
`
};
let myv = new Vue({
el:"#app",
components:{ // 声明组件们。要用到哪些组件。
// key 是组件名，value 是组件对象
app:App
},
template:`<app />` // 入口组件。跟标签一样的用法。这里才开始用组件。
});3. 父传子
父组件可以给子组件传递数据：父传子
/* 子组件 */
// 头组件
let MyHeader ={
template:`
<div class='head' :mydata="myData">
<h1>我是头部</h1>
{
{ myData }} is {
{ myAge }}
<div>
<button type="button" @click="showNum()">点击出现数据</button>
</div>
</div>
`,
props:["myData", "myAge"],
methods:{
showNum:function(){
console.info( this.myAge );
}
}
};
/*入口组件，父组件*/
let App = {
components: {
"my-header":MyHeader
},
template:`<div>
<my-header :myData="name" :myAge="age"></my-header>
</div>
`,
data:function(){
return {
name:"Lily",
age:28
}
}
}
// 应用组件
let myV = new Vue({
el:"#app",
// 声明要用的组件们。key 是组件名，value 是组件对象。
components:{
app:App
},
template:'<app/>' // 入口组件
});1. 父组件通过属性给子组件传值。
2. 子组件要声明props，接受传递的值。
// 不要省略冒号
props:["父组件传递的属性名1", "父组件传递的属性名2"]3.子组件可以使用传递过来的值
-
template 里直接用
-
JS 里
this.属性用