VUE3+TS 子对父组件传值emit

在父组件定义函数

TS

setup(props) {
	const onChangeValue = (value: number) => {
	    console.log('frozeRule:', value);
	};
	
	return { onChangeValue };
}

VUE

<c-child-comb @change="onChangeValue" />

子组件调用函数,emit

方式一,VUE

<div @click="(val: any) => $emit('change', val)"></div>

方式二,TS

export default defineComponent({
	emits: ['change'],
    setup(props, { emit }) {
    	const changeKey = (key: number) => {
            emit('change', key);
        };
    },
})
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中,可以使用`props`和`emit`来实现父组件之间的传值。 1. 组件接收父组件传递的值: 在组件中,使用`props`选项来声明接收的属性,并在模板中使用它们。 ```vue <template> <div> <p>父组件传递的值:{{ fatherInfo }}</p> </div> </template> <script> import { defineProps } from 'vue'; export default { props: { fatherInfo: { type: String, required: true } } } </script> ``` 2. 父组件向组件传递值: 在父组件中,使用`v-bind`指令将数据传递给组件的属性。 ```vue template> <div> <child-component :fatherInfo="info"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { info: '这是父组件传递的值' } } } </script> ``` 3. 组件向父组件传递值: 在组件中,使用`emit`方法触发自定义事件,并将需要传递的值作为参数。 ```vue <template> <div> <button @click="sendDataToParent">向父组件传递值</button> </div> </template> <script> import { defineEmits } from 'vue'; export default { emits: ['childEvent'], methods: { sendDataToParent() { this.$emit('childEvent', '这是组件传递的值'); } } } </script> ``` 在父组件中,使用`v-on`指令监听组件触发的事件,并在方法中接收传递的值。 ```vue <template> <div> <child-component @childEvent="receiveDataFromChild"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { receiveDataFromChild(value) { console.log('接收到组件传递的值:', value); } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值