组件传值 (Vue2、Vue3、React)

这代码写的

已于 2024-03-22 10:51:50 修改

阅读量318

点赞数 1

文章标签： vue react 前端

于 2023-06-24 17:09:25 首次发布

本文链接：https://blog.csdn.net/D3S3P/article/details/131362709

版权

Vue2

父子组件传值

黄色子传父红色父传子

props写法

数组写法好处方便写的少

props: ["msg"]

对象写法好处严谨规定类型必要性指定默认值

props:{
	msg:{
		type:Number,         //限制类型
        require:true,        //限制必要性
		default:function(){  //指定默认值
			return {}
		}
	}
}

兄弟传值

在src文件中新建utils文件里创建 eventbus文件夹内创建eventbus.js

import Vue from 'vue'
export default new Vue()

发送数据

import eventbus from 'eventbus.js'

eventbus .$emit('自定义事件名', 传递的数据)

接收数据

import eventbus from './eventBus.js'

eventbus .$on('自定义事件名', val => {
  console.log(val)   //val数据
})

ref 传值

子组件
<mySon ref="aa"></mySon>

父组件中
this.$refs.aa    即可获取其组件中的所有数据

插槽传值

v-slot可简写为 #

匿名插槽

父组件中
<son>1111111111</son>

子组件中
添加<slot></slot>   即可将 1111111111 在子组件的slot标签中获取

具名插槽

父组件中
<son>
    <template #hh>
    	<h1>我是头部</h1>
    </template>
    <template v-slot:ff>
    	<h1>我是底部</h1>
    </template>
</son>

子组件中
<header><slot name="hh"></slot></header> //头部就可以单独传过来   我是头部
<footer><slot name="ff"></slot></footer> //底部也可以单独调用了   我是底部

插槽子传父值

在子元素中
<slot name="center" :aa="num"></slot>  /具名插槽
<slot :aa="num"></slot>                /匿名插槽
data(){
return:{
num:1
}}

在父级中接收
<son>
	<template #center="{{aa}}"></template>	  //具名插槽
	<template #default="scoped"></template>	  //匿名插槽   scoped需要解构 {{aa}}
</son>

Vue3

父向子组件传值

父组件
<son msg:"我是父组件传给子组件的信息">

子组件
<script setup>
    let props=defineProps({
        msg:{
            type:String,     // 数据类型
            default:"",      // 默认值
            required:true    // 验证
        }
    })
</script>

子向父组件传值

//父
<son @sendMsg="fn"></son>
<script setup>
    let fn = val => {
        console.log(val)    //拿到数据
    }
</script>

//子组件
<script setup>
    let send_to_father='我知道了'
    let emit=defineEmits(['sendMsg'])    //通过 update 声明此时修改的是 父传过来的变量
    function fn(){
        emit("sendMsg",send_to_father)
    }
</script>

兄弟组件传值

下载 npm i mitt 或者 yarn add mitt

在src中新建util文件加在新建 bus.js 内容为:

import mitt from "mitt"// 引入 mitt
const bus = new mitt()// 创建bus对象
export default bus// 默认导出bus

发送数据

import bus from "../../util/bus";
function sendToxq() {
    // emit() 一定要自定义一个事件
    // emit(自动义事件的名称,传的值)
    bus.emit("sendMsg", onOff.value);// 给兄弟组件发消息
}

接受数据

import bus from "./util/bus";
onMounted(()=>{
    bus.on("sendMsg",(val)=>{
        aa.value=val//将传过来的值赋给aa
    })
})

跨组件通信

<template>
    <div>
        爷爷辈
        <father></father>
    </div>
</template>

<script setup>
import father from './father.vue'
    let say=ref("孙子我是你爷爷")
    provide("msg",say)                //传输数据
</script>

<template>
    <div>
        父辈
        <son></son>
    </div>
</template>

<script setup>
import son from './son.vue'
</script>

<template>
    <div>
        儿子辈
        我收到爷爷给我的值  <mark>{{ say }}</mark>
    </div>
</template>

<script setup>
    let say=inject("msg")    //接受到数据
</script>

React

父传子值

父组件
class App extends React.Component {
  state = {
    msg: "我是父传子的数据",
  };
  render() {
    return (
      <div>
        父组件
        <Son aa={this.state.msg} />
      </div>
    );
  }
}

函数式子组件

function Son(props) {
  const { aa } = props;
  return (
    <div>
      我是函数式子组件 父组件传值为<mark>{aa}</mark>
    </div>
  );
}

类式子组件

class SonC extends React.Component {
  render() {
    return (
      <div>
        我是类子组件 父组件传值为<mark>{this.props.aa}</mark>
      </div>
    );
  }
}

子向父传值

子组件
function Son(props) {
  let { Msg } = props;
  function clickHeader() {
    let sonMsg = "这是来自子组件的数据";
    Msg(sonMsg);
  }
  return (
    <div>
      this is son <button onClick={clickHeader}>按钮</button>
    </div>
  );
}

父组件
import React from "react";
class App extends React.Component {
  sendMsg = val => {
    console.log(val);
  };
  render() {
    return (
      <div>
        <Son Msg={this.sendMsg} />
      </div>
    );
  }
}

兄弟传值

兄弟传值 B传递给A

1 先把B中的数据通过子传父

2 在用父传子给A

function SonA({ sendMsg }) {
  return <div>this is A 收到的数据为{sendMsg}</div>;
}
function SonB({ Msg }) {
  let bMsg = "B的数据";
  return (
    <div>
      this is B<button onClick={() => Msg(bMsg)}>按钮</button>
    </div>
  );
}

父组件
class App extends React.Component {
  state = {
    sendMsg: "",
  };
  getMsg = val => {
    console.log(val);
    this.setState({
      sendMsg: val,
    });
  };
  render() {
    return (
      <div>
        <SonA sendMsg={this.state.sendMsg}></SonA>
        <SonB Msg={this.getMsg}></SonB>
      </div>
    );
  }
}

跨组件通信

APP --> A --> C

import React, { createContext } from "react";
const { Provider, Consumer } = createContext();
function ComC() {
  return (
    <div>
      this is C<Consumer>{value => <span>{value}</span>}</Consumer>
    </div>
  );
}
function ComA() {
  return (
    <div>
      this is A
      <ComC />
    </div>
  );
}
class App extends React.Component {
  state = {
    msg: "APP传的值",
  };
  render() {
    return (
      <Provider value={this.state.msg}>
        <div>
          <ComA></ComA>
        </div>
      </Provider>
    );
  }
}