vue3 代码使用记录 组件引入使用

//对应页面引入需要的vue3api

import { h, onMounted, reactive, ref } from 'vue'

//引入图标 在使用前可以到网站进行预览和查询，xicons.org

import {
  AddSharp, TrashSharp, SearchSharp, CreateOutline, ShieldHalfOutline
} from '@vicons/ionicons5'

//引入组件

import RoleModal from './components/xxx.vue'
import BindMenuModal from './components/yyy.vue'

## //注册组件的钩子
之后想要调用组件的方法就是


function handleAdd () {
  RM.value.open()}

```js
const RM = ref() // xxx的refs
const BMM = ref() // yyy的refs

## //使用组件
使用组件不需要再声明

```js
 <role-modal
      ref="RM"
      @ok="handleSearchPage"
    />
    <bind-menu-modal ref="BMM" />

组件结束

页面进入时执行的周期onMounted 相当于 mounted

onMounted(() => {
  handleSearchPage()//执行的方法 3不用带this
})