vue3开发记录

一父子组件传值

关闭弹窗为例

父组件

<Model v-model:show-modal="showModal" title="添加服务项目" :show-modal="showModal" bottom-btn="保存" />

子组件

// 接收父组件传来的值
interface Props {
  title: string
  showModal: boolean
  bottomBtn?: string
}
withDefaults(defineProps<Props>(), {
  title: 'hell',
  showModal: false,
})
// 子组件监听并改变
const emit = defineEmits(['update:showModal'])

function handleClose(): void {
  emit('update:showModal', false)
}

二切换左侧路由页面无法正常显示

比如下面这样

由于 最外层使用transition 控制台并不会报错，但是会警告且页面回显不出来（再次点击不能正常显示）

解决：

原因是因为页面组件没有根节点会导致页面切换不成功解决: 页面组件需要加一个根节点才能保证页面正常显示

（vue3是支持无根节点的但是遇上还是得加上）

三编辑页面获取表单的某条数据

子组件（编辑页面组件）:editPage.vue

    
    ```
const getDetail = (query) => {
    console.log(query) // query 是点击的当条数据内容
};
    // 使用defineExpose 方法将方法暴露出去,父组件可以通过ref调用到
defineExpose({
  getDetail,
});

父组件（表单页面）form.vue

const editHos = ref(null)
    <editPage ref='editPage' />
    editPage.value.getDetail(row) // 可以调用子组件暴露出来的方法

关于setup

直接写入标签上，简单写法，不用再写export default { setup(){}}

    <script setup></script>

watchEffect

类似于computed,响应式地跟踪器依赖项时立即运行一个函数，并在更改依赖项时重新运行它

关于组件通信【defineProps、defineEmits、defineExpose】

defineProps

父组件给子组件传值，和props传递方式一样

    父组件
    <myComponents name='张三' />
    
    子组件
    const props = defineProps({
        name: String
    })
    子组件使用：
    console.log(props.name)

defineEmits

子组件向父组件事件传递值

    子组件
    <son @click=handleClick />
    const emits = defineEmits(['handle'])
    const handleClick = ()=>{emits('handle','张三')}
    
    父组件
    <myComponents @handle='handleP' />
    
    const handleP = (data)=> {
        console.log(data) // '张三'
    }

defineExpose

组件暴露自己的属性，方法,父组件可以拿到子组件的

    子组件
    <son />
    const a= 1
    const getDetail = ()=>{console.log('getDetail')}
    defineExpose({
        a,
        getDetail
    })
    
    
    
    父组件
    <son ref='son'/>
    const son = ref(null)
    console.log('属性：', son.value.a,'方法：',son.value.detail())

vue3 开发小记录