vue3+ts+jsx之后的父子组件通讯

父组件中

方式1：在setup中直接return JSX模板

import { withModifiers,computed, defineComponent, reactive, ref, watchEffect } from "vue";
import HelloWorld from "./components/HelloWorld/HelloWorld";

export default defineComponent({
	"name": "App",

	/**
	 * vue3 新增加
	 * @param props
	 */
	setup(props, {slots, attrs, emit}) {

		const addChange = (bool:any)=>{
			console.group('父组件中');
			console.log(bool);
			console.groupEnd();
		}

        // 动态组件
		function renderHelloWorld(num: number) {
			return (
				<HelloWorld
				msg='Michael Ray'
				onAddChange={(bool:any) => addChange(bool)}
				age={num}/>
			)
		}

		return () => {
			return (
				<div id="app">
					{renderHelloWorld(40)}
				</div>
			)
		}
	},

});

方式2：父组件通过render returnJSX模板

import { withModifiers,computed, defineComponent, reactive, ref, watchEffect } from "vue";
import HelloWorld from "./components/HelloWorld/HelloWorld";

const img = require('./assets/logo.png');
export default defineComponent({
	"name": "App",

	/**
	 * vue3 新增加
	 * @param props
	 */
	setup(props, {slots, attrs, emit}) {

		const addChange = (bool:any)=>{
			console.group('父组件中');
			console.log(bool);
			console.groupEnd();
		}

		function renderHelloWorld(num: number) {
			return (
				<HelloWorld
				msg='Michael Ray'
				onAddChange={(bool:any) => addChange(bool)}
				age={num}/>
			)
		}

		return {
			name: state.name,
			addChange  // 方法注入到this
		}

	},

	render() {
		return (
			<div>
				<h1>{name}</h1>
				<HelloWorld
					msg='Michael Ray' age={30}
					onAddChange={(bool:any) => this.addChange(bool)}
				></HelloWorld>
			</div>
		)
	}

});

子组件中

子组件中不管属性还是方法都通过props接收，注意方法是Function

子组件如果是tsx

import { defineComponent } from "vue";

require('./index.css');

const props = {
	msg: String,
	age: {
		type: Number,
		required: true
	},
	onAddChange:Function
}
export default defineComponent({
	name: "HelloWorld",
	props: props,
	setup(props, { emit }) {
		const handleOk = () => {
			console.group('[子组件中]触发');
			emit('addChange', false);
			console.groupEnd();
		};

		return {
			handleOk
		}
	},

	render(){
		return (
			<div class="hello">
				<p>{this.msg}</p>
				<p>{this.age}</p>
				<p><button onClick={()=>this.handleOk()}>click</button></p>
   				<p><button onClick={()=>this.$emit('addChange', 'This is param')}>这是直接触发</button></p>
			</div>
		)
	}
});

子组件如果是vue

<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		<h1>{{ age }}</h1>
		<button @click="test">click</button>
	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

const props = {
	msg: String,
	age: {
		type: Number,
		required: true
	},
	onAddChange:Function
}

export default defineComponent({
	name: "HelloWorld",
	props: props,
	mounted() {
		console.group('[HelloWorld]components');
		console.log(this.age)
		console.groupEnd();
	},
	methods: {
		test() {
			this.$emit('addChange',123) // 触发
		}
	},
});
</script>