在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。
官网给出的解释真的是简洁精辟。没懂之前难得其义。偷一张官网的图压阵。

父子组件的关系

1
2
3

<parent>
    <child></child>
</parent>

如上所示，很容易分辨出父组件和子组件。

1
2
3
4
5
6
7
8

// 可理解为子组件
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<span>{{ message }}</span>'
})

1
2

<!----可理解为父组件---->
<child message="hello!"></child>

如上所示，定义child组件的可以理解为子组件，使用时可理解为父组件。

1. 子组件要显式地用 props 选项声明它预期的数据
2. 如data一样，prop可以在模板中使用

props

下面以单文件组件为例：

1
2
3
4
5
6
7
8
9
10
11
12
13

// aa.vue （子组件）
<div>{{name}}</div>
props: {
  name: {
    default: 'coderKobe',
    type: String
  }
}

// import aa （父组件）
<aa name="dev"></aa>

// 此时aa.vue会接收到dev。也就是父组件通过props将值传递给子组件。同时子组件必须在props选项声明他预期的数据才可以。

$emit

同样以单文件组件为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// bb.vue （子组件）
<button @click="handleEmit">绑定事件</button>
methods: {
  handleEmit() {
    this.$emit('parent-event');
  }
}

// import bb （父组件）
<bb @parent-event="handleEvent"></bb>
methods: {
  handleEvent() {
    console.log('handleEvent')
  }
}
// 此时点击绑定事件按钮时，实际上执行的父组件的handleEvent函数。也就是说子组件通过事件给父组件发送消息。

先简单写一下父子组件通信。还有一些疑问需要继续探索，如props双向绑定，多层父子组件通信，非父子组件通信等。

16年大约还在学校的时候，一时兴起想着搭个博客出来。然后找了资源手把手教你使用Hexo + Github Pages搭建个人独立博客，跟着文章步骤操作就可以了。搭建完之后就放着了，新近计划记录一些心得。所以又要把它拾起来。

在此仅记录复活博客的一些步骤。不作为搭建博客的指南。如果想要搭建类似的博客，根据上面的资源操作就好了。

首先将https://github.com/Coderkobe/Coderkobe.github.io.git库下载到本地。凭着久远的记忆和关键词hexo，Google就可以开始操作了。

由于node和Git躺在电脑已很久了。所以这些个安装步骤就不赘述了。首先安装hexo

1

$ npm install hexo-cli -g

然后我就直接执行hexo server了，紧接着就碰壁了。忘记了操作一个步骤：hexo init “mkdirName”,这里的mkdirName可以是任何名称。由于最后要将博客部署到http://coderkobe.github.io域名下。所以我就直接hexo init coderkobe.github.io,然后把之前clone的git库的文件复制到这个文件夹下。

现在执行hexo server,在浏览器打开(http://localhost:4000/) 。bingo，本地可以了。然后接下来就是更换主题，找到了自己之前使用的 theme 。根据文档进行操作，更换自己需要的主题。当然你也可以google hexo theme关键字,选择自己喜欢的主题。

至此本地已经没有问题了，需要做的就是部署到远程。执行hexo deploy进行部署。

_config.yml这个文件很重要，基本所有的配置都是通过这个文件修改。

在执行hexo deploy之前，首先需要在 _config.yml 中修改deploy对应的参数，一个正确的部署配置中至少要有 type 参数，例如：

1
2
3
4

deploy:
  type: git
  repo: https://github.com/Coderkobe/Coderkobe.github.io.git
  branch: master

缩进
YAML依靠缩进来确定元素间的从属关系。因此，请确保每个deployer的缩进长度相同，并且使用空格缩进。

同时还需要安装hexo-deployer-git，然后执行hexo deploy。就可以部署至远端了。部署过程可能需要输入git账号。

下面是hexo快速开始给的一些简单命令，但都很常用

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment