Vue学习笔记----组件

组件

组件初始化

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {
  { count }} times.</button>'
})

子组件传值

子组件中如何引用data中的属性

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{
  { post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})

> props定义在子组件中用到的属性，通过v-bind绑定data属性到子组件  

子组件事件

//子组件事件
//子组件