父子组件和传值 / nuxt#8

Nuxt.js提供了一些方便的功能来帮助我们构建高性能的应用程序。其中之一就是父子组件的功能。在 Nuxt.js 中，我们可以使用父子组件来组织我们的应用程序。父组件可以包含一个或多个子组件，子组件可以接收父组件传递的数据并渲染出相应的内容。这种组件化的方式可以让我们更好地管理和维护我们的代码。

组件

子组件是直接导入即可，无需引入！
所有的组件都应写在components这个文件夹中，它会自动导入。

components -> NaveBar.vue, 
<NaveBar /> 可直接导入无需引入

嵌套组件

components -> Ui -> Menu.vue
<UiMenu>
  test
</UiMenu>
// 或者这样写：
<ui-menu>
  test
</ui-menu>

子组件接受父组件参数

//index.vue
<Menu :active = "active"></Menu>

//Menu.vue 接受参数
defineProps({
  active:{
      type:Boolean,
      default:false
  }
})

子组件向父组件传递参数或方法

defineExpose用法

//Roles.vue
<script setup>
let sonmsg = '这是子数据'
const open = () => { console.log("hello")}
//把数据导出
defineExpose({
  sonmsg,
  open
})
</script>

//index.vue
<template>
<div>
  <Roles ref="RoleRef"></Roles> 
</div>
</template>
<script setup>
let RoleRef = ref(null)

onMounted(() => {
  //只能在这里面才能获取到完整的组件ref的信息
  console.log('RoleRef', RoleRef.value, RoleRef.value.sonmsg)
  RoleRef.value.open()
})

//或在函数中使用
const onSubmit = () => {
  console.log(566, "imgmodel", RoleRef.value.sonmsg)
}
</script>

Nuxt和Vue的逻辑会略有不同，写法上也有差异。总体上讲，提高了自动化的程度和易用性。