vue 基础组件

组件注册的注意事项

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

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

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

通过prop组件传值 父传子

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

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

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

<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>
  `
})

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

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

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

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</div>

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

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

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

组件切换实现tap 栏的切换

<div id="dynamic-component-demo" class="demo">
  <button
    v-for="tab in tabs"
    v-bind:key="tab"
    v-bind:class="['tab-button', { active: currentTab === tab }]"
    v-on:click="currentTab = tab"
  >{{ tab }}</button>

  <component
    v-bind:is="currentTabComponent"
    class="tab"
  ></component>
</div>

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

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;
}