组件通信笔记

1.组件通信

• 组件之间相互传递数据
• 1.1 父传子(如果在A组件中使用了B组件，那么A组件就是父组件，B组件就是子组件)
  • 父组件传数据给子组件通过属性来传递

  <template>
     <div>
        <子组件 属性名1="属性值1" 属性名2="属性值2"></子组件>
     </div> 
  </template>
  

  • 子组件通过props接收父组件传的数据

      export default {
          props:["属性名1","属性名2"]
          或者
          props:{
              属性名1:{
                  type:类型,//类型
                  required:true,//是否必须
                  default(){
                      return "默认值"
                  }
              }
          }
      }
  

• 1.2 子传父
  • 子组件通过触发自定义事件传值

    this.$emit("自定义事件名",数据);
  

  • 父组件通过v-on或@绑定自定义事件,接收子组件传递的数据

  <子组件  @自定义事件名="要处理的函数" />
  
  export default {
  
      methods:{
          要处理的函数(形参){
              //形参就是子组件传过来的数据
          }
      }
  
  }
  

• 1.3任意组件之间传数据
• 需要一个中介【中央事件总线】

Vue.prototype.$bus = new Vue(); //main.js

• 在A组件中触发自定义事件，传递数据

this.$bus.$emit("自定义事件名",数据)

• 在B组件中绑定自定义事件，接收数据

this.$bus.$on("自定义事件名",(data)=>{
    //data就是接收的数据
})

2.插槽

• 2.1匿名插槽
• 2.2具名插槽
• 2.3作用域插槽

3.elementui

• 快速上手
  • 1.局部安装

  cnpm i element-ui -S
  

  • 2.在main.js写入一下内容

        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);
    

  • 3.查文档