vue组件化深入--day03

---

个人blog-1： 拾忆生活
个人blog-2： 极简-拾忆生活
欢迎大家来踩，同步更新

---

vue–自定义 component 标签

• 先仔细看下components命名规则对比

• is 关键字

  • <component :is="xxx"></component>

• ComponentA: ComponentA 的缩写---->ComponentA

• 即这个变量名同时是：

  • 用在模板中的自定义元素的名称
  • 包含了这个组件选项的变量名

import ComponentA from './ComponentA.vue'

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

实例1：

<script type="text/javascript">
    var HelloTom = {
   
      data: function(){
   
        return {
   
          msg: 'HelloTom'
        }
      },
      template: '<div>{
   {msg}}</div>'
    };
    var HelloJerry = {
   
      data: function(){
   
        return {
   
          msg: 'HelloJerry'
        }
      },
      template: '<div>{
   {msg}}</div>'
    };
    var vm = new Vue({
   
      el: '#app',
      data: {
   
      },
      components: {
   
        'hello-tom': HelloTom,
        'hello-jerry': HelloJerry
      }
    });
  </script>

动态组件 & 异步组件

的’is’ 关键字

• ${}^{\prime }i{s}^{\prime }关键字$ 用来动态切换组件
  • 其属性值可以是 值、也可以是 函数
  • 绑定key数据，根据key的值不同，调用不同的组件。

例1：

<div id="app">
    <component :is="key"></component>
</div>

var componentA = {
   
    template: `<div style="color:red">我是A组件</div>`
}
var componentB = {
   
    template: `<div style="color:blank">我是B组件</div>`
}
var componentC = {
   
    template: `<div style="color:pink">我是C组件</div>`
}
var app = new Vue({
   
    el: '#app',
    components: {
   
        "comA": componentA,
        "comB": componentB,
        "comC": componentC
    },
    data:{
   
        key:'comB'
    }
})

例2：

• 多个组件使用同一个挂载点，并动态切换【动态组件】

<div id="example">
  <button @click="change">切换页面</button>
  <component :is="currentView"></component>
</div>

var home = {
   template:'<div>我是主页</div>'};
var post = {
   template:'<div>我是提交页</div>'};
var archive = {
   template:'<div>我是存档页</div>'};
new Vue({
   
  el: '#example',
  components: {
   
    home,
    post,
    archive,
  },
  data:{
   
    index:0,
    arr:['home','post','archive'],
  },
  computed:{
   
    currentView(){
   
        return this.arr[this.index