首页IT科技vue父组件监听子组件的生命周期(vue3.使用setup语法糖监听父组件的变化。父子组件传值,监听,计算属性)

vue父组件监听子组件的生命周期(vue3.使用setup语法糖监听父组件的变化。父子组件传值,监听,计算属性)

时间2025-07-18 13:30:44分类IT科技浏览4944
导读:setup语法糖就是把setup写在script标签里 子组件 <script setup>...

setup语法糖就是把setup写在script标签里 子组件

<script setup>

import { ref, computed, onBeforeMount, onMounted, getCurrentInstance, template, defineProps, defineEmits, watch } from "vue"; const props = defineProps({ message: { type: Object, }, }); const emits = defineEmits(["next"]); let _hoverStyle = computed(() => { return { top: 1, opacity: 0 } }) watch( props.message , (newValue, oldValue)=> { console.log( newValue) 这里如果想要访问当前页面的一个函数的话必须保证函数在watch这段代码之前             ,否则会抱函数underfined             。如果去掉immediate: true 那么函数位置随意                     。但是刚进入页面的时候这个函数是不执行的                     ,你必须在onMount里面再去访问一次这个函数       。 }, //可选immediate: true马上执行 { deep: true, immediate: true }, );

或者是这样写             。

watch( () => props.message, (newValue, oldValue)=> { disposeData(newValue)//初始化已有数据 }, );

click(){

emit(next,{传回父组件的参数})

}

父组件

<son :message="message" @next="next"></son>

next(e){

子组件传来的值e

}

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
华容网站建设(华容吧 百度贴吧) python 字符串固定长度(python字符串的驻留机制是什么)