vue脚手架中的组件通信（动态组件以及组件缓存）

组件通信

无论是面试还是做项目都是重点！！！！

父子组件通信

父组件

视图
<子组件 自定义属性的名称='你要传递的值' :自定义属性的名称='你要传递的变量'></子组件>

子组件

视图
{{自定义属性的名称}}
逻辑代码
props:['自定义属性的名称1','自定义属性的名称2','自定义属性的名称3'...]

props属性的验证

这个验证只是为了传值更加的严谨，如果你觉得麻烦，你可以不用写，你必须会看会用

props是自定义属性，可以接收，父组件传递的数据。

props:['自定义属性的名称1']，这种形式并没有对传递数据的类型进行验证

验证规则：
一、只验证数据类型
props:{
    自定义属性的名称:String/Number/Boolean/Function/Array,
    自定义属性的名称:[String,Number,Boolean]//多数据类型验证
}
二、添加默认值
props:{
    自定义属性的名称:{
        type:String/Number/Boolean/Function/Array,
        default:''//默认值
    }
}
三、必填项的验证requried
props:{
    自定义属性的名称:{
        type:String/Number/Boolean/Function/Array,
        default:''//默认值,
        requried:true
    }
}
四、自定义规则验证
props:{
    自定义属性的名称:{
        type:String/Number/Boolean/Function/Array,
        default:''//默认值,
        requried:true，
        validator(val){
        //在这个函数中，我们需要返回一个验证的状态，true是成功 false是失败
        return true/false //根据你自己的规则
        }
    }
}

 

子父组件通信

• 子组件

  视图
  <button @click='子组件的事件名称'>送给父亲</button>
  ​
  代码
      methods: {
          子组件的事件名称(){
          //this.$emit() 触发事件，它有两个参数，第一个参数是自定义事件名称，第二个参数你要给父组件传递的数据
              this.$emit('自定义事件名称',你要给父组件传递的数据)
          }
      },

• 父组件

视图
<子组件 @自定义事件名称='父组件的事件名称'></子组件>
​
代码
  methods: {
    父组件的事件名称(e){
      console.log(e,'事件源')
    }
  },

 

非父子组件通信

非父子组件通信

一、单一事件管理（你基本上未来都用不到）

• main.js

  Vue.prototype.变量名 = new Vue
  //new Vue() 因为它 有 $on 和 $emit

• 组件Ｂ

视图
<button @click='事件名称'>发送数据给A</button>
逻辑
    methods: {
        事件名称(){
            //触发事件 $emit,两个参数，事件名称和数据
            this.原型上的变量名.$emit('自定义事件名称',数据)
        }
    },

• 组件A

代码
  mounted() {
    //创建一个监听器，实时监听事件的变化
    //$on这个监听器有两个参数，一、是事件名称，二、是回调函数
    this.原型上的变量名.$on("自定义事件名称", d => {
      //d是传送的数据1
    });
  }

 

 

• 动态组件

  <component is='组件名称'></component>

  <component :is='变量'></component>

• 组件缓存

<keep-alive>要缓存的内容</keep-alive>