vue3 组件通信方式

文章目录

  • 组件通信方式
    • props
    • 自定义事件
    • 全局事件总线
    • v-model
    • useAttrs
    • ref与$parent
    • provide与inject
    • pinia
    • slot

组件通信方式

props

​ 实现父子组件通信,在vue3中可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用!

父组件

<template>
  <div>
    <child info="测试" :msg="msg"></child>
  </div>
</template>

<script setup lang="ts">

import Child from "@/views/demo/child.vue";
let msg = "Hello World!";

</script>

子组件

  • props是只读的(只能读取,不能修改)
  • template中props可省略不写
<template>
  <div>
      子组件:接受到的父组件的信息:{{props.info}}{{msg}}
  </div>
</template>

<script setup lang="ts">
// 下面两种方式都可以
// let props = defineProps(['info','msg'])
let props = defineProps({
    info: {
      type: String,
      required: true,
    },
    msg: String
})
</script>

自定义事件

​ 在vue框架中事件分为两种:一种是原生的DOM事件,另外一种自定义事件。

  • 原生dom事件

    原生DOM事件可以让用户与网页进行交互,比如click、dbclick、change、mouseenter、mouseleave…

    // 默认会给事件回调注入event事件对象  
    <div @click="handler"></div>
    // 当事件需要注入多个参数时候,需获取event对象时,需加入$event参数
    <div @click="handler(1,2,3,$event)">我要传递多个参数</div>
    
  • 自定义事件可以实现子组件给父组件传递数据。

    在vue3框架click、dbclick、change(这类原生DOM事件),不管是在标签、自定义标签上(组件标签)都是原生DOM事件。在vue2中组件标签需要通过native修饰符才能变为原生DOM事件

    父组件定义函数,@绑定事件

    <template>
      <div>
        <child @logMsg="logMsg" @click="logMsg"></child>
      </div>
    </template>
    
    <script setup lang="ts">
    
    import Child from "@/views/demo/child.vue";
    const logMsg = (msg: string) => {
      console.log(msg);
    };
    
    </script>
    

    子组件内部触发

    defineEmits方法是vue3提供的方法,不需要引入直接使用。defineEmits方法执行,传递一个数组,数组元素即为将来组件需要触发的自定义事件类型,此方执行会返回一个 e m i t 方法用于触发自定义事件。当点击按钮的时候,事件回调内部调用 emit方法用于触发自定义事件。当点击按钮的时候,事件回调内部调用 emit方法用于触发自定义事件。当点击按钮的时候,事件回调内部调用emit方法去触发自定义事件,第一个参数为触发事件类型,第二个、三个、N个参数即为传递给父组件的数据。

    <template>
      <div>
          <button @click="emits('logMsg', '我是参数1')">点击</button>
      </div>
    </template>
    
    <script setup lang="ts">
    
    let emits = defineEmits(['logMsg']);
    </script>
    

    注意: 正常说组件标签书写@click应该为原生DOM事件,但是如果子组件内部通过defineEmits定义就变为自定义事件

全局事件总线

​ 全局事件总线可以实现任意组件通信,在vue2中可以根据VM与VC关系推出全局事件总线。但是在vue3中没有Vue构造函数,也就没有Vue.prototype.以及组合式API写法没有this,

如果想在Vue3中使用全局事件总线功能

可以使用插件mitt实现。

mitt:官网地址:https://www.npmjs.com/package/mitt

v-model

​ v-model指令可是收集表单数据(数据双向绑定),除此之外它也可以实现父子组件数据同步。父组件 v-model:** 绑定值会在子组件props中接受到,并存在一个 update:** 的自定义事件

父组件

<template>
  <div>
    <child v-model:msg="msg"></child>
  </div>
</template>

<script setup lang="ts">

import Child from "@/views/demo/child.vue";
import {ref} from "vue";

const msg = ref("Hello World");
</script>

子组件

<template>
  <div>
    {{msg}}
  </div>
  <button @click="emits('update:msg', '子组件')">点击</button>
</template>

<script setup lang="ts">

let props = defineProps({
  msg: {
    type: String,
  }
});
let emits = defineEmits(["update:msg"]);
</script>

useAttrs

​ 在Vue3中可以利用useAttrs方法获取组件的属性与事件(包含:原生DOM事件或者自定义事件),次函数功能类似于Vue2框架中 a t t r s 属性与 attrs属性与 attrs属性与listeners方法。

父组件

<template>
  <div>
    <child v-model:msg="msg" type="success" size="small" title='标题'></child>
  </div>
</template>

<script setup lang="ts">

import Child from "@/views/demo/child.vue";
import {ref} from "vue";

const msg = ref("Hello World");
</script>

子组件

可以通过useAttrs方法获取组件属性与事件,类似于props,可以接受父组件传递过来的属性与属性值。需要注意如果defineProps接受了某一个属性,useAttrs方法返回的对象身上就没有相应属性与属性值。

<script setup lang="ts">
import {useAttrs} from 'vue';
let $attrs = useAttrs();
</script>

ref与$parent

​ ref可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC,那么子组件内部的方法与响应式数据父组件可以使用的。

父组件

<template>
  <div>
    <child ref="child"></child>
  </div>
</template>

<script setup lang="ts">

import Child from "@/views/demo/child.vue";
import {onMounted, ref} from "vue";

const child = ref<Child>();
const parentValue = ref("父组件测试数据");

defineExpose({
  parentValue
})

onMounted(() => {
  console.log(child.value.childValue);
})
</script>

但是需要注意,如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”,外部不能访问。

$parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例,当然父组件的数据与方法需要通过defineExpose方法对外暴露。

<template>
  <div>
    {{childValue}}
  </div>
  <div>
    <button @click="handler($parent)">获取父组件实例</button>
  </div>
</template>

<script setup lang="ts">

import {ref} from "vue";

const childValue = ref("测试");

let handler = (parent: any) => {
  console.log(parent.parentValue);
}

defineExpose({
  childValue
})
</script>

provide与inject

vue3提供两个方法provide与inject,可以实现隔辈组件传递参数.provide方法用于提供数据,此方法执需要传递两个参数,分别提供数据的key与提供数据value

父组件

<script setup lang="ts">
import {provide} from 'vue'
provide('token','admin_token');
</script>

后代组件

<script setup lang="ts">
import {inject} from 'vue'
let token = inject('token');
</script>

pinia

pinia官网:https://pinia.web3doc.top/

pinia也是集中式管理状态容器,类似于vuex

slot

​ 插槽:默认插槽、具名插槽、作用域插槽可以实现父子组件通信.

  • 默认插槽

    父组件

    <template>
      <div>
        <child ref="child">
          默认插槽内容
        </child>
      </div>
    </template>
    
    <script setup lang="ts">
    
    import Child from "@/views/demo/child.vue";
    </script>
    

    子组件

    <template>
      <div>1
        <slot/>2
      </div>
    </template>
    
    <script setup lang="ts">
    </script>
    
  • 具名插槽 v-slot: 可以简写为 #

    父组件

    <template>
      <div>
        <child ref="child">
          默认插槽内容
          <template v-slot:a>
            具名插槽内容
          </template>
        </child>
      </div>
    </template>
    
    <script setup lang="ts">
    
    import Child from "@/views/demo/child.vue";
    </script>
    

    子组件

    <template>
      <div>1
        <slot/>2
        <slot name = "a"/>
      </div>
    </template>
    
    <script setup lang="ts">
    </script>
    
  • 作用域插槽

    子组件数据由父组件提供,但是子组件内部决定不了自身结构与外观(样式)

    父组件

    <template>
      <div>
        <h1>slot</h1>
        <Child :todos="todos">
          <template v-slot="{$row,$index}">
            <!--父组件决定子组件的结构与外观-->
            <span :style="{color:$row.done?'green':'red'}">{{$row.title}}</span>
          </template>
        </Child>
      </div>
    </template>
    
    <script setup lang="ts">
    import { ref } from "vue";
    import Child from "@/views/demo/child.vue";
    //父组件内部数据
    let todos = ref([
      { id: 1, title: "吃饭", done: true },
      { id: 2, title: "睡觉", done: false },
      { id: 3, title: "打豆豆", done: true },
    ]);
    </script>
    <style scoped>
    </style>
    

    子组件

    <template>
      <div>
        <h1>todo</h1>
        <ul>
          <!--组件内部遍历数组-->
          <li v-for="(item,index) in todos" :key="item.id">
            <!--作用域插槽将数据回传给父组件-->
            <slot :$row="item" :$index="index"></slot>
          </li>
        </ul>
      </div>
    </template>
    <script setup lang="ts">
    defineProps(['todos']);//接受父组件传递过来的数据
    </script>
    <style scoped>
    </style>
    

你可能感兴趣的:(vue.js,javascript,前端)