Vue: 组件通信与组件访问

组件通信

1. 通过props向子组件传递数据

   1. 在子组件中，通过选项props来声明需要从父级接收到的数据

      // 一定要使用v-bind指令绑定，不然就是传递的是普通字符串了
      props: {
        Str: {
          type: String, // 指定类型
          default: "888", // 默认值
          required: true  // 使用子组件时必传值，不传将会报错
        },
        Arr: {
          type: Array, // 指定类型
          // 默认值 对象或数组的默认值必须从一个工厂函数返回
          default() {
            return []
          }
        },
        // 还可以实现验证
        password: {
          validator(value) {
            // 这个值必须与下列字符串中的其中一个相匹配
            return ['success', 'warning', 'danger'].includes(value)
          }
        },
        // 驼峰命名传递
        myClass: {
          type: String,
          default: "软件工程"
        }
      }
      
      // 注意 若子组件中props定义的变量名为驼峰法，那么传递也需要驼峰法，不然会报错
      

   2. 在父组件中，通过v-bind绑定要传递的数据

      // 注意此处的驼峰写法
      <child :Arr="this.arr" :Str="this.str" :my-class="myClass"></child>
      

      
      
2. 通过自定义事件($emit Events)向父组件发送消息
   1. 在子组件中，通过**$emit()**来触发自定义事件

      <button @click="clickitem(item)"></button>
      clickitem(item){
        this.$emit('myEvent',item)
      }
      

   2. 在父组件中，通过v-on来监听子组件事件

      <child @my-Event="doSomething"></child>
      doSomething(item){
        console.log(item)
      }
      

组件访问

补充组件访问(ref、$refs、children、parent、root)相关知识

1. 通过ref标记(reference)子组件，通过$refs可以拿到子组件中的数据和触发子组件方法

   <child ref="my-child1"><child>
   <child ref="my-child2"><child>
   
   this.$refs // refs是一个对象，对象里包含所有被标记的ref
   this.$refs.my-child1.function  // 触发my-child1中的function方法
   this.$refs.my-child2.name // 拿取my-child2中的name数据
   

2. 通过$children访问子组件 (较少使用，children是一个数组，根据下标来访问是不稳定的)
3. 通过$parent访问父组件 (较少使用，降低了组件的耦合度，每个子组件的父组件都是不相同的，可能会报错)
4. 通过$root访问根组件

对象字面量：

const name = "why";
const obj = { 'name': name } 
const obj = { name }  // 两种写法相同