小程序
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
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
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>
</>
);
}
总结
相同点:
都是通过props属性来实现父组件向子组件传值。
都是通过事件或回调函数来实现子组件向父组件传值。
不同点:
- 小程序的props属性可以传递任意类型的数据,而vue和react的props属性只能传递基本类型的数据,如果要传递对象或数组,需要使用v-bind或{}语法。
- 小程序的子组件可以直接修改父组件传递过来的props属性,而vue和react的子组件不能直接修改父组件传递过来的props属性,需要使用emit或setState方法。
- vue和react的子组件可以使用defineProps或propTypes来定义和校验接收的props属性,而小程序的子组件没有这个功能。
- react的父组件可以使用createContext和useContext来实现跨组件传值,而vue和小程序没有这个功能。
小程序 | vue | react | |
---|---|---|---|
父向子传值 | props | props | props |
子向父传值 | 事件/回调函数 | 事件/回调函数 | 事件/回调函数 |
props类型 | 任意类型 | 基本类型 | 基本类型 |
props修改 | 直接修改 | emit方法 | setState方法 |
props定义和校验 | 无 | defineProps | propTypes |
跨组件传值 | 无 | 无 | createContext/useContext |