vue组件的详解

1>基本组件的介绍

前言在组件定义中 自定义html元素是不允许驼峰命名的和动态绑定的数据

//正确的

props:['listData'] 或者props['list-data']
//错误的

1-1 全局组件

//html

   

Vue.component('my-test',{  //注册组件
  template:`

      
初学组件
      
初学组件2
    
`
})
new Vue({
  el:"#app"
})

1-2局部组件

//html

   

new Vue({
  el:"#app",
  components:{
    'my-test':{
        template:`

          
初学组件
          
初学组件2
        
`
     }
   }
})

2>组件的通信

利用props进行 父-->子通信

以全局组件为例

Vue.component('my-test',{  //注册组件
  props:['list'], //这里是props属性 这里的list就是自定义标签上的
  template:`

      
{{item}}
    
`
});
new Vue({
  el:"#app",
  data:{
    listData:['初学Vue','vue的组件']
  }
})

局部组件

new Vue({
  el:"#app",
  data:{
    listData:['初学Vue','vue的组件']
  },
  components:{
    'my-test':{
      props:['list'],
      template:`

        
{{item}}
      
`
    }
  }
})

3>多重组件嵌套的通信

Vue.component('my-test',{
          props:['list','childList'],
          template:`
            

              
{{item}}
              

                
              
            
          `
        })
        Vue.component('child-list',{
          props:['listData'],
          template:`
            

              
{{item}}
            
          `
        })

        new Vue({
          el:"#app",
          data:{
            vueList:['北京','上海','深圳'],
            vueListChild:['中国','美国','英国','俄罗斯']
          }
        })

4> 子->父通信 利用自定义通信

this.$emit

这个自定义的addFn在子组件中定义
父组件用v-on:eventName 绑定自定义事件
子组件
一次增加{{item}}
methods:{
    addTodo(num){
        this.$emit('addFn',num);
    }
}

一个小案例

image.png

5>props数据的验证

new Vue({
  el:"#app",
  data:{
    count:20
  }
});
Vue.component('myTest',{
  props:{
    countNum:{
      type:Number,  //类型为数字
      default:0  //设置默认值
    }
  }
})

6>slot自定义组件标签中可以添加内容

如果在注册组件中没有使用slot的情况，那么标签中的元素会被替换掉

  
    
我是原始div
  

//js
Vue.component('myTest',{
  template:`
    


      
第一个LI
      
      
第二个LI
      
第三个LI
    
  `
})
new Vue({
  el:"#app"
})

image.png

替换指定的slot

image.png

7）组件状态的保持(重要)

把需要保持状态的组件用keep-alive包起来，就不会被vue生命周期重新走一遍，保持状态了，即使请求数据也不会请求了

8）解决当vue 跳转相同路由不同参数页面不刷新

案例:比如场景用户进行搜索，然后跳转到搜索页面，而到了搜索页面用户继续点击搜索那么参数不会改变

watch: {
        //监听相同路由下参数变化的时候，从而实现异步刷新
        '$route'(to,from){
        },
    },