【vue】5.0 组件注册、父子传值、refs通信、bus事件总线（组件非父子通信）

注册方式

1.全局注册

Vue.component

2.局部组件

   
    

      {{title}}
      
      
      
      
      
      
    

   
    

以上涉及到父传子，属性验证

type:String, Boolean, Array, Object, Function, Symbol
required 必填
default 默认值

单项数据流

父组件调用子组件，多个数据项可以使用一个对象进行塞值：
v-bind="params"等于子组件的
:content="params.content" :a="params.a" :b="params.b" :c="params.c"
属性传的时候，使用 content-abc 这种命名，子组件接的时候，使用 contentAbc 命名
// 单项数据流的概念: 子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据

Non-prop属性

如果父组件传给子组件的参数，子组建并没有prop对应的参数来接，那么该属性将直接由子组件最外层html标签继承，这种情况就叫Non-prop属性，如何让子组件避免这种传递：

如果子组件没有最外层html标签。也可以指定某个标签继承。更可以分别继承。

子传父

父传子属性往下传，子传父事件向上传。

子传父案例——卖座

ref通信

    

      get
      


      
      add

    
   

    

bus事件总线（组件非父子通信）

根本不在组件结构之外的对象，该如何通信？

父子组件通过事件进行通信

如下表示子组件传递到父组件的参数可以带数值到父组件方法：

v-model使用：

如上使用，props中必须为modelValue,触发事件也必须叫update:modelValue，但可以如下写法：

  const app = Vue.createApp({
    data() {
      return { count: 1 }
    },
    template: `
      
    `
  });

  app.component('counter', {
    props: ['app'],
    methods: {
      handleClick() {
        this.$emit('update:app', this.app + 3);
      }
    },
    template: `
      
{{app}}
    `
  });

以上可以用于父子组件双向绑定时使用。

更深入扩展，可以多参数像这样简写：

  const app = Vue.createApp({
    data() {
      return { count: 1 ,count1: 1 }
    },
    template: `
      
    `
  });

  app.component('counter', {
    props: ['count','count1'],
    methods: {
      handleClick() {
        this.$emit('update:count', this.count + 3);
      },
      handleClick1() {
        this.$emit('update:count1', this.count1 + 3);
      }
    },
    template: `
      
{{count}}
      
{{count1}}
    `
  });

v-model默认绑定一个固定的参数modelModifiers,可以绑定修饰符：