组件

几点基础：

1、 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别

2、 有两种组件的注册类型：全局注册和局部注册

全局注册：Vue.component('my-component-name', { // ... options ... })

局部注册：

通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}
或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

给子组件传值

父子组件之间的传值(通过props属性)

传值方式：vue页面间参数传递的方法总结_多则惑少则明的博客-CSDN博客_vue页面间传递参数

props传值

传对象

对于一个给定的对象 post：

post: {
  id: 1,
  title: 'My Journey with Vue'
}
下面的模板：

等价于：

  v-bind:id="post.id"
  v-bind:title="post.title"
>

传数组

自定义组件与v-for

              :content1="listitem" :no="listindex">