首页 > 其他分享 >tsx defineComponent emits 实现

tsx defineComponent emits 实现

时间:2024-09-08 21:47:37浏览次数:11  
标签:const tsx text value emits param1 props ref defineComponent

emits 定义结构和使用

  • 子组件
import { defineComponent, PropType, h, computed, ref, watch } from 'vue';

export default defineComponent({
    name: 'PageF',
    props: {
        render: {
            type: Function,
            required: true // required定义必须
        },
        params1: {
            type: String,
            default: 'default value', // 设置默认值
            required: true
        }
    },
    //定义emits结构
    emits: {
        change: (val: number) => true //固定返回true
    },
    setup(props, ctx) {
        const { render } = props;

        const param0 = computed(() => props.params1); // 监听 props.params1 的变化
        const param1 = ref(props.params1); // 内部独立的 ref

        console.log(param1, 'param1');

        // 监听 param1 的变化
        watch(param1, () => {
            console.log(param1.value, 'param1_change');
        });

        // 监听 param0 的变化
        watch(param0, () => {
            console.log(param0.value, 'param0_change');
        });

        return () => {
            return (
                <div>
                    <button onClick={() => ctx.emit('change', 121212)}>btn</button>
                </div>
            );
        };
    }
});

  • 父组件使用
<template>
    <div class="component-name">
        <child :render="render" :params1="abc" @change="handleChange" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import child from './components/child';
import { ElInput } from 'element-plus';
const abc = ref('sdlfkjsdfj');
const render = (h) => {
    const text = ref('');
    return h('input', {
        type: 'text',
        modelValue: text.value, // 使用modelValue 而不是value传递输入框的值
        onInput: (e) => {
            text.value = e.target.value; // 更新 text.value
        }
    });
};

function handleChange(val) {
    console.log(val, 'number_sdlvnsdlfsjlfj');
}

setTimeout(() => {
    abc.value = '中文';
}, 3000);
</script>

<style lang="scss" scoped></style>

其他使用方式记录

image

image

image

标签:const,tsx,text,value,emits,param1,props,ref,defineComponent
From: https://www.cnblogs.com/jocongmin/p/18403560

相关文章

  • 基于mediapipe和pyttsx3技术实现一个姿态识别语音播报器
    系列文章目录第一章Python机器学习入门之mediapipe和pyttsx3的结合使用文章目录系列文章目录前言一、mediapipe和pyttsx3是什么?二、使用步骤1.引入库2.读入数据总结前言在比赛准备时,由于比赛任务要求需要机器人在自主迅游中记录家庭成员的行为动作,并进行语音播报......
  • vue3 tsx 测试几种使用方式
    总论tsxsetup里面定义了returndom元素,则optionsapi的render函数不生效options的render函数生效前提是setup里面不能returndomoptions的render里面可以直接使用this访问setup里面的数据或者ctxtsx一般最好用defineComponent包裹,这样响应式才能生效tsxdom语法使用{}......
  • SCHNEIDER TSXTIOAS170BDI35600 24VDC IN模块的优缺点
        SCHNEIDERTSXTIOAS170BDI3560024VDCIN模块作为工业自动化控制系统中的关键组件,具有多个显著的优点,这些优点使得它在各种工业应用场合中脱颖而出。以下是对该模块优点的详细阐述:高精度与稳定性:该模块能够高精度地接收和转换24V直流电压信号,确保信号的准确性。同......
  • ts和tsx有什么区别?
    ts和tsx都是TypeScript的文件扩展名,它们之间的主要区别在于是否支持JSX。.ts:这是一个普通的TypeScript文件。在这种文件中,你可以使用TypeScript的所有特性,但不能使用JSX。.tsx:这是一个支持JSX的TypeScript文件。在这种文件中,你可以使用TypeScript的所有特性,同时也可以使用JSX。......
  • vue3在tsx 中使用ElLoading 无效 ,初始化eltable 样式加载丢失
    在plugins目录下创建elementPlus/index.tsimporttype{App}from"vue";//需要全局引入一些组件,如ElScrollbar,不然一些下拉项样式有问题import{ElLoading,ElScrollbar}from"element-plus";constplugins=[ElLoading];constcomponents=[ElScrollbar];e......
  • python3之语音合成pyttsx3库使用
    pyttsx3pyttsx3是一个Python库,‌用于将文本转换为语音输出。‌它支持多种操作系统,‌包括Windows和macOS,‌并且提供了丰富的功能来控制文本到语音的转换过程。‌importpyttsx3msg="HelloWorld!"pyttsx3.speak(msg)engine=pyttsx3.init()engine.say(msg)engine.run......
  • Vue3中,使用TSX/JSX编写的父组件,如何向子组件中传递具名插槽(slot)的内容
    子组件(Child)-模板代码:<template><divclass="child-component"><divclass="header-box"><slotname="header"></slot></div><slot></slot></div></tem......
  • defineProps和defineEmits
    defineProps当在不同场景下,父组件控制子组件展示不同的样式,或者传递不同的数据,这个时候就需要使用到props,子组件通过props来接收父组件传递过来的数据。场景复现:不同的页面中导航栏展示不同的颜色,这个时候就需要对导航栏组件使用props声明,如此父组件就可以完成对子组件......
  • props与emits
    在Vue3中,父子组件之间的数据传递是一个常见的需求。本文将介绍如何在Vue3中传递对象,并且在子组件中访问和修改父组件对象中的属性值,以及子组件如何调用父组件中的方法。在Vue3中,父子组件之间传值有以下作用:1.组件通信:父组件可以通过向子组件传递数据来实现与子组件的......
  • vue3 defineEmits 使用
    概论defineEmits用来定义子组件暴漏给父组件的自定义事件测试代码子组件<template><divclass="box">child</div></template><scriptlang="ts"setup>interfaceEmit{(e:"emitfn1",data:Array<number>):void;......