Vue3中父子组件传值方式，父组件调用子组件属性和函数 |
您所在的位置：网站首页 › vue中ref属性 › Vue3中父子组件传值方式，父组件调用子组件属性和函数 |
Vue3中父子组件传值方式，父组件调用子组件属性和函数
|
父组件传值给子组件和vue2类似，使用v-bind或者 ：绑定属性，然后在子组件里面，使用defineProps实现接收。 子组件向父组件传值，需要先在子组件里面定义emit，然后发送消息传参。 父组件想调用子组件的属性的时候，需要在子组件里面使用defineExpose暴露出属性或者方法。 子组件代码： 子组件标题：{{ title }} 点击获取标题 向父组件传值 import { onBeforeUnmount, onUnmounted } from 'vue' // 父子组件传值 const props = defineProps({ title: { type: String, default: '默认标题' } }) // 子组件向父组件传值 const emit = defineEmits(["sendMsg"]) const sendMsg = ()=>{ emit("sendMsg", "参数1", "参数2") } // 点击获取标题 const getTitle = ()=>{ console.log("得到的标题是:", props.title); } // 组件销毁之前 onBeforeUnmount(() => { console.log('组件销毁之前') }) // 组件销毁之后 onUnmounted(() => { console.log('组件销毁之后') }) defineExpose({ getTitle, name:"子组件暴露的属性" })父组件代码： Vue3的生命周期 点击更改组件内容 创建和销毁组件 {{ content }} 执行子组件函数 import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue' // import AboutMe from './views/AboutMe.vue' import AboutMe from './views/AboutMe.vue' console.log('setup语法糖模式中，可以直接在这里当做created函数使用') const demo = ref() const content = ref('这是内容：div内容') const display = ref(true) // 获取子组件实例 const aboutMe = ref() const runSun = () => { aboutMe.value.getTitle() console.log('获取子组件暴露的属性:', aboutMe.value.name) } const receive = (m1, m2) => { console.log('父组件接收到子组件传递过来的参数:', m1, m2) } const updateContent = () => { content.value = 'div组价内容更新' } const show = () => { display.value = !display.value } // 页面渲染之前 onBeforeMount(() => { console.log('渲染之前', demo) }) // 页面渲染之后 onMounted(() => { console.log('渲染之后', demo) }) // 组件更新之前 onBeforeUpdate(() => { console.log('组件更新之前', demo) }) // 组件更新之后 onUpdated(() => { console.log('组件更新之后', demo) })实现的效果：
|
【本文地址】
今日新闻 |
推荐新闻 |