一、示例一：
父组件：
<template> <div class="home"> <render-input :msg="title" @updateMsg="updateMsg" > </render-input> </div> </template> <script lang="ts"> import { Options, Vue } from 'vue-class-component'; import renderInput from './components/render-components2.vue'; @Options({ components: { renderInput, }, }) export default class Home extends Vue { public title = 'title' public updateMsg(val:any){ console.log('23um', val) this.title = val } } </script>
子组件：
<script lang="ts"> import { ElInput } from "element-plus"; import { defineComponent, h, watch } from "vue"; export default defineComponent({ props: { msg: { type: String, default: '', }, }, emits: ['updateMsg'], setup(props, { emit, attrs }: any) { return (props:any) => { watch( props.msg, (val) => { console.log('18', val) }, { immediate: true } ) return h( "div", // 标签，只写标签名，不写<> { // 属性 ref: 'test-render-ref', class: 'test-render-class', // innerHTML: 'test-render-html' // 这里打开后子元素里边innerHTML内容不能展示 }, [ // 子元素 h(ElInput,{ ...ElInput.$el, ...ElInput.$attrs, class: 'test-render-class-child', placeholder: '请输入内容', style: { color: 'FF0000' }, modelValue: props.msg, "onUpdate:modelValue": ($event:any) => { console.log('25', $event) console.log('27', ElInput) emit('updateMsg', $event) }, }) ] ); }; } }) </script>
这里通过emit调用父组件的方法，改变值，然后再次单向数据流传递到子组件，子组件input数据更新。
这种方法在父组件定义数据，在子组件实现逻辑，再返回数据到父组件，个人认为是适合封装复杂组件的。
二、示例二：
<script lang="ts"> import { ElInput } from "element-plus"; import { defineComponent, h, ref } from "vue"; export default defineComponent({ props: { msg: { type: String, default: '', }, }, emits: ["updateMsg"], setup(props, { emit, attrs }: any) { return () => { let inputValue = ref("123456"); return h( "div", // 标签，只写标签名，不写<> { // 属性 ref: "test-render-ref", class: "test-render-class", // innerHTML: 'test-render-html' // 这里打开后子元素里边innerHTML内容不能展示 }, [ // 子元素 h( ElInput, { ...ElInput.$el, ...ElInput.$attrs, class: "test-render-class-child", placeholder: "请输入内容", style: { color: "FF0000", }, modelValue: inputValue.value, "onUpdate:modelValue": ($event: any) => { // 实现了数据更新 return (inputValue.value = $event.target.value); } } ) ] ) } } }) </script>
在"onUpdate:modelValue" 里实现修改后的值
三、示例三：
父组件：
<template> <div class="home"> <render-input :msg="title" @updateMsg="updateMsg" > </render-input> </div> </template> <script lang="ts"> import { Options, Vue } from 'vue-class-component'; import renderInput from './components/renderDiv.vue'; @Options({ components: { renderInput, }, }) export default class Home extends Vue { public title = 'title' public updateMsg(val:any){ console.log('23um', val) this.title = val } } </script>
子组件：
<script lang="ts"> import { ElInput } from "element-plus"; import { defineComponent, h, ref } from "vue"; export default defineComponent({ props: { msg: { type: String, default: '', }, }, emits: ["updateMsg"], setup(props, { emit, attrs }: any) { return () => { let inputValue = ref("123456"); console.log('16inputValue', inputValue.value) if(props.msg){ inputValue.value = props.msg } return h( "div", // 标签，只写标签名，不写<> { // 属性 ref: "test-render-ref", class: "test-render-class", // innerHTML: 'test-render-html' // 这里打开后子元素里边innerHTML内容不能展示 }, [ // 子元素 h( ElInput, { ...ElInput.$el, ...ElInput.$attrs, class: "test-render-class-child", placeholder: "请输入内容", style: { color: "FF0000", }, modelValue: inputValue.value, "onUpdate:modelValue": ($event: any) => { // 实现了数据更新 return (inputValue.value = $event.target.value); }, }, ), h("span", { class: "test-render-class-button", style: { color: "#FF0000", border: "1px solid #ccc", width: "60px", cursor: "pointer", }, innerHTML: "提交", onClick: () => { emit('updateMsg', inputValue.value += 's-i') }, }), ] ); }; }, }); </script>
四、欢迎交流指正，关注我一起学习。
