vue项目中的父传子---子传父---bus总线---props类型

Vue中 v-on 和 v-bind 中不建议使用 camelCase 或 PascalCase 命名方式,会自动转为小写
首先补充下基础知识：
HTML是不区分大小写的。
而JS区分。
所以一般情况下，JS的大小写变量放到HTML中，会将大写改成小写，并在前面添加短杠。

一、父传子

父组件通过自定义属性向子组件传值
子组件通过props接受传递过来的值

父组件

<Child :msg-data='msg' :str='str'></Child>  //自定义属性名不能有大写

子组件

props：['numDate','str']

传递的引用数据类型，子组件可以改变父组件数据
传递是基本数据类型，子改，父不改
最好还是不要直接改传递的数据
如果子想改父，那就在子组件上把值赋给另一个子组件的值
用深拷贝，避免引用数据类型共用一个地址

二、子传父

子组件先触发事件处理程序
在事件处理程序中通过自定义事件发送
通过父组件监听该事件，并触发对应的事件处理程序
在事件处理程序中获得改数据

子组件

 this.$emit('send-data',this.msg) //不能有大写'sendData'
 this.$emit('send',this.num)

父组件

<button-counter @send-data="getData"></button-counter>
 methods: {
     getData(data) {
         this.info = data
      },
},

三、bus总线

在src下创建一个bus.js

//bus就是vue的一个实例，可以理解为vue实例化后的一个组件
var bus = new Vue();
//把bus挂载Vue实例的原型对象上，也就是说用Vue实例化的每个组件都可以访问到这个$bus属性了。
Vue.prototype.$bus = bus;
//之后就可以使用$bus进行监听和触发了。
this.$bus.$emit(event)
this.$bus.$on(event,fn)

单击C向B传递值

C组件

import { Bus } from 'bus.js'

  <div @click="send">C： 单击C向B传递数据</div>
    methods: {
       send(){
           Bus.$emit("change",this.msg)
        }
    }

B组件

import { Bus } from 'bus.js'
//可以在初始化的时候监听，什么时候收到change就执行需要的逻辑
 created(){
        Bus.$on("change",(data)=>{
           this.msgB = data
        })
  }

四、 props类型

   props: {
        msg: String,
        msg: [String, Number],
        msg: {
                type: String,
                //必须由父组件传入
                required: true,
                },
        msg: {
                type: Number,
                default: 100,
              },
        msg: {
                type: Array,
                default() {
                   return [1, 2, 3]
                },
              },
         msg: {
              // 有效性验证
            validator: function (value) {
              // 这个值必须匹配下列字符串中的一个
              return ['success', 'warning', 'danger'].indexOf(value) !== -1
             },
           },
},

链接: https://blog.csdn.net/first_helloword/article/details/101230341.
链接: https://zhuanlan.zhihu.com/p/349991812.