09-vue3组件间数据共享

1.props

vue2中组件间数据共享大概有这几种方式:

props 和 $emit、v-model、 .sync、 ref、$bus、$attrs、$listeners、$parent、$children、$root、provide、inject、vuex

在vue3中数据共享的方式要分成几种情况,由于在组合式api中vue2语法也可以使用,但是官方不推荐这种混合的语法,所以我们只讨论在组合式api中进行组件间数据共享.大致分成两种情况,普通的setup写法和setup的语法糖形式写法

用 props 传数据给子组件

1.1普通的setup写法

one.vue组件:

two.vue组件:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qMSVR9wI-1681265288949)(/uploads/vue3/images/m_7972e64344b3356bc4b11a0f75c5616d_r.png)]

1.2在setup语法糖写法

父组件Home.vue组件:

子组件child.vue组件

1.3修改父组件传递过来的属性

<script setup>
//defineProps:在语法糖中不需要引入 直接使用
const props=defineProps({
  isshow:Boolean,
  money:{
    type:String,
    default:''
  }
})

const toggle=()=>{
  //想要使用传递过来的数据:props.属性   
    console.log(props.isshow); //false
    //点击按钮让child-box盒子显示
    //需要修改父组件传递过来的isshow属性,这时会报一个警告:reactivity.esm-bundler.js?89dc:521 Set operation on key "isshow" failed: 		//target is readonly. 
    props.isshow=true;
}
</script>

由于vue是单向数据流,父组件传递给子组件的属性,子组件只能使用不能修改,在vue2中可以使用.sync修饰符.但是在vue3中v-bind的.sync修饰符和组件的model选项被删除了.在vue3中我们可以直接使用v-model语法糖进项绑定,绑定属性发生了变化,属性名是 modelValue， 事件名是：update:modelValue.

在one.vue中:

two.vue组件:

Vue3在setup函数上提供了两个参数，一个props，一个是context下面的emit方法，分别来处理输入和输出。

可以简写为v-model

 

   <two :coffe="coffe" :title1="title1" :tea="tea" v-model:count="count"  >two>

const changModelValue=()=>{
        emit("update:count",200)
  }

setup语法糖的写法:

//定义抛出事件的名字 
//defineEmits适用于 Vue3.2版本，不需要引入
const emit=defineEmits(["update:count"])
 
 const changModelValue=()=>{
        emit("update:count",200)
    }

2.$emit

子组件向父组件传值可以使用$emit

vue3在setup函数上提供了两个参数，一个props，一个是context下面的emit`方法，分别来处理输入和输出。

2.1setup写法

子组件two.vue

父组件one.vue:

2.2setup语法糖写法

child.vue子组件:

home.vue父组件:

3.ref

子组件child.vue

//向外部暴露属性或者方法适用于Vue3.2版本, 不需要引入
    defineExpose({
        childName: "这是子组件的属性",
        someMethod(){
            console.log("这是子组件的方法")
        }
    })

父组件home.vue

4.attrs

attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合

4.1setup中获取

父组件:

<template>
  <two :coffe="coffe" :title1="title1" :tea="tea" class="demo" >two>
template>

子组件:

<script>
    props:["coffe"],
    setup(props,{emit,attrs}) {
      console.log("attrs",attrs) //{title1: '我是父组件数据', tea: Array(2), class: 'demo'}
    }
</script>

4.2setup语法糖获取

父组件:

<template>
  <child  :money="money" >child>
template>

子组件:

<script setup>
   import {ref,useAttrs} from "vue"
//接收attrs
 const attrs = useAttrs();
 console.log("attrs",attrs) //{money: '我这有一些钱拿去花吧!}
</script>

5. provide / inject

provide / inject 为依赖注入

provide：可以让我们指定想要提供给后代组件的数据或

inject：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用

// Parent.vue


// Child.vue