vue 基础组件

组件注册的注意事项

• 在组件中data必须要是function（）

data: function () {
  return {
    count: 0
  }
}

只有组件当中的data是函数的时候，在组件复用的时候其中的数据才会是独立不受干扰的。

通过prop组件传值 父传子

Vue.component('blog-post', {
  props: ['title'],
  template: '
{{ title }}
'
})

• 在富组件中通过自定一的一个属性 然后在子组件中用prop申明接受他就可以在子组件中使用了

Vue.component('blog-post', {
  props: ['post'],
  template: `
    

      
{{ post.title }}
      

    
  `
})

通过$emit 方法触发父组件函数

• 通过$emit触发父组事件可以携带参数，从而可以改变父组件的值。达到 父-子 之间的传值

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})


  

    
  


Vue.component('blog-post', {
  props: ['post'],
  template: `
    

      
{{ post.title }}
      
        Enlarge text
      
      

    
  `
})


  Enlarge text

在子组件上用emit(自定义事件的名字) 监听 v-on:自定义事件的名字
来实现 子-父传值

组件切换实现tap 栏的切换

  {{ tab }}

  


Vue.component('tab-home', { 
    template: '
Home component
' 
})
Vue.component('tab-posts', { 
    template: '
Posts component
' 
})
Vue.component('tab-archive', { 
    template: '
Archive component
' 
})

new Vue({
  el: '#dynamic-component-demo',
  data: {
    currentTab: 'Home',
    tabs: ['Home', 'Posts', 'Archive']
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
})

//当点击button 的时候会让current = tab（循环输出的值）就会让当前的组件样式
//添加activ ,在组件中有计算属性currentTabComponent 当currentTab发生变化
//就会重新计算 得到新的值 在组件切换 component 中is属性的值会发生变化 组件就会发生相应的改变

.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}