VUE 组件的写法

在上一节我们定义了一个MyHelloWorld 组件

const MyHelloWorld = {
  template: '<div>hello world</div>'
}

这是一个js对象有一个template属性，VUE在渲染的时候就自动把template的内容渲染到页面的<router-view> 区域

我们可以理解为VUE渲染的就是页面的一个区域，整个页面其实就是index.html 里id为app的div而已，这也是页面的一个区域。

url变化也就是router变化时router-view的区域会渲染为组件，后面写到布局的时候再详细的去讲这个，我们先看一下如何写组件。

通常的场景是我们要复用某一组代码，比如每个页面主体区域内的标题，在做好了样式以后每个有标题的页面我们只要引入组件，并且赋值它需要变化的内容即可

const MyTitle = {
  template: '<div><h1 style="background-color: #ccc">{{ title }}</h1></div>',
  props: ['title']
}

这里创建了一个MyTitle对象，里边有个变量title ，可通过父级组件向这传递参数title

注册该组件

Vue.component('my-title', MyTitle)

在页面中调用该组件

const MyHelloWorld = {
  template: '<div><my-title title="我是标题"/>hello world</div>'
}

在原来MyHelloWorld的模板里需要显示标题的地方，敲上<my-title title="我是标题"/> ，在vue渲染的时候就会把这部分代码渲染为MyTitle里的内容并且给标题赋值，这样当我们页面中需要标题的地方就可以复用MyTitle的代码

完整的代码

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

const MyHelloWorld = {
  template: '<div><my-title title="我是标题"/>hello world</div>'
}

const MyTitle = {
  template: '<div><h1 style="background-color: #ccc">{{ title }}</h1></div>',
  props: ['title']
}

Vue.component('my-title', MyTitle)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: MyHelloWorld
    }
  ]
})

插槽
上面是组件及赋值，另一个常用的场景是我们需要在一个组件内插入一段代码或者其他组件什么的去组成一个相对复杂的页面

比如下面的结构，我是不变的下边的div可以是这样的两行文字，也可以是个表格，是个一堆图片什么什么的

<div>
   我是不变的
   <div>
      <h1>我是变的</h1>
      <p>我也是可变的</p>
   </div>
</div>

这时就需要组件内包含代码，就像html的嵌套结构一样

我们给MyTitle增加一个slot

const MyTitle = {
  template: '<div><h1 style="background-color: #ccc">{{ title }}</h1><slot/></div>',
  props: ['title']
}

在<my-title>标签关闭前插入一些代码测试一下

const MyHelloWorld = {
  template: '<div><my-title title="我是标题">我是变的<br>我也是<hr>我还是</my-title>hello world</div>'
}

完整的代码

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

const MyHelloWorld = {
  template: '<div><my-title title="我是标题">我是变的<br>我也是<hr>我还是</my-title>hello world</div>'
}

const MyTitle = {
  template: '<div><h1 style="background-color: #ccc">{{ title }}</h1><slot/></div>',
  props: ['title']
}

Vue.component('my-title', MyTitle)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: MyHelloWorld
    }
  ]
})

VUE官方文档有更详细的说明，我们先挑出要用到的关键代码，让项目可以继续下去，先上手，再深入，

一个完整的页面就是各个组件什么的堆砌起来的，了解最基本的方式，动手开搞逐步去学习更多的知识。