vue,react,小程序 父子组件传值

小程序

小程序：组件间通信与事件

1.父组件向子组件传值

- 父组件在data中定义count；

<children count="{{count}}"></children>

Page({
	data: {
		count: '114514'
	}
})

- 子组件在properties中接收传值

properties: {
    count: Number
},

2. 子组件通过触发事件向父组件传值

- 父组件定义事件

<children bind:parentevent="parentMethod"></children>

Page({
	parentMethod (e) {
		console.log('子组件传来的值',e.detail.value)
	}
})

- 子组件触发事件

<button bindTap="childrenTap">子组件按钮</button>

Component({
	data: {
		childrenText: 'this is children!'
	},
	Methods: {
		childrenTap () {
			this.triggerEvent('parentevent',{value: this.data.childrenText})
		}
	}
})

3. 父组件通过this.selectComponent(id or class) 获取子组件实例

- 父组件定义事件

<button bindtap="getChildComponent">获取子组件实例</button>

Page({
	getChildComponent: function(){
    const child = this.selectComponent('.children')
   console.log(child)
  },
})

vue3 组件传值 componsition API

vue3: 深入组件

1.父组件向子组件传值

- 父组件中定义值

<template>
  <children-component :count="123"></children-component>
</template>

- 子组件接收通过definProps接收

<script setup>
defineProps(['count'])
</script>

<template>
  <h1>{{count}}</h1>
</template>

2.子组件通过自定义事件向父组件传值

- 父组件定义事件

<script setup>
import { ref } from 'vue'
const count = ref(1)
import ChildrenComponent from './components/ChildrenComponent.vue'
function addCount(e) {
  count.value++
  console.log(e)
}
</script>

<template>
  <children-component :count="123" @add-count="addCount"></children-component>
  <h1>{{ count }}</h1>
</template>

- 子组件触发事件并传值

<script setup>
import { ref } from 'vue';
defineProps(['count'])
defineEmits(['add-count'])
const childrenMsg = 'hello kugou'
</script>

<template>
  <h1>{{count}}</h1>
  <button @click="$emit('add-count',childrenMsg)">子组件按钮</button>
</template>

3. 父组件通过ref获取子组件实例

- 父组件定义ref

<script setup>
import { ref } from 'vue'

const childRef = ref(null)
import ChildrenComponent from './components/ChildrenComponent.vue'

function getChildComponent () {
  console.log(childRef.value.childrenMsg)
  childRef.value.childrenMethods()
}

</script>

<template>
  <children-component   ref="childRef"></children-component>
  <button @click="getChildComponent">父组件按钮</button>
</template>

- 子组件定义数据及方法并通过defineExpose暴露出来

<script setup>

defineExpose({
  childrenMsg,
  childrenMethods
})
const childrenMsg = 'hello kugou'
function childrenMethods () {
  console.log('ok')
}
</script>

<template>
  <h1>{{childrenMsg}}</h1>
</template>

React 传值 Fcuntion Component

react通过props传值

1. 父组件通过props向子组件传值

- 父组件中定义值

import ChildrenComponent from "../Components/ChildrenComponent"
export default function App () {
  let count = 114514
  return (
    <>
      <ChildrenComponent count={count}></ChildrenComponent>
    </>
  )
}

- 子组件接收props并解构

import React from 'react'

export default function ChildrenComponent({count}) {
  return (
    <div>{count}</div>
  )
}

2. 子组件触发事件并向父组件传值

- 父组件定义事件 clickHandler

import ChildrenComponent from "../Components/ChildrenComponent"
export default function App () {
  let count = 114514
  function clickHandler (str) {
    console.log('parent clicked!',str)
  }
  return (
    <>
      <ChildrenComponent count={count} parentMethods={clickHandler}></ChildrenComponent>
      <button onClick={clickHandler}>父组件按钮+1</button>
    </>
  )
}

- 子组件通过调用自定义事件childrenHandler，触发parentMethods并传值

import React from 'react';

export default function ChildrenComponent({ count,parentMethods }) {
  let str = 'aotuman'
  function childrenHandler () {
    parentMethods(str)
  }
  return (
    <>
      <div>{count}</div>
      <button onClick={childrenHandler}>子组件按钮触发父组件事件</button>
    </>
  )
}

3. 通过回调函数来传递子组件给父组件

- 父组件定义getChild函数

 import React from 'react';
import ChildrenComponent from "../Components/ChildrenComponent"

export default function App () {

  let child = null;

  function parentHandler () {
    console.log(child.str);
    child.childrenHandler();
  }

  function getChild (instance) {
    child = instance;
  }

  return (
    <>
      <ChildrenComponent getChild={getChild} ></ChildrenComponent>

      <button onClick={parentHandler}>父组件按钮触发子组件事件</button>
    </>
  )
}

- 组件挂载后调用并传递一个对象

import React, { useEffect } from 'react';

export default function ChildrenComponent({ getChild }) {
  let str = 'aotuman'
  function childrenHandler () {
    console.log('children click!')
    
  }
  
  useEffect(() => {
    getChild({ str, childrenHandler });
  }, []);

  return (
    <>
    
      <button onClick={childrenHandler}>子组件按钮</button>
    </>
  );
}

总结

相同点：

1. 都是通过props属性来实现父组件向子组件传值。

2. 都是通过事件或回调函数来实现子组件向父组件传值。

不同点：

1. 小程序的props属性可以传递任意类型的数据，而vue和react的props属性只能传递基本类型的数据，如果要传递对象或数组，需要使用v-bind或{}语法。
2. 小程序的子组件可以直接修改父组件传递过来的props属性，而vue和react的子组件不能直接修改父组件传递过来的props属性，需要使用emit或setState方法。
3. vue和react的子组件可以使用defineProps或propTypes来定义和校验接收的props属性，而小程序的子组件没有这个功能。
4. react的父组件可以使用createContext和useContext来实现跨组件传值，而vue和小程序没有这个功能。

	小程序	vue	react
父向子传值	props	props	props
子向父传值	事件/回调函数	事件/回调函数	事件/回调函数
props类型	任意类型	基本类型	基本类型
props修改	直接修改	emit方法	setState方法
props定义和校验	无	defineProps	propTypes
跨组件传值	无	无	createContext/useContext