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

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

时间2025-06-14 19:25:48分类IT科技浏览4508
导读: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
如何将一个盘的容量分给另外一个盘(如何把现有分区划分为更多分区) 人工智能怎么挣钱快(【人工智能 AI ChatGPT】使用 ChatGPT 每天赚取高达 500 元的 10 种方法)