一、示例一:
父组件:
<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>
四、欢迎交流指正,关注我一起学习。