2.26-vue3综合案例(elementui/父子传递)

使用elmentui注意一下几点
 

import './assets/main.css'

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

在main.js  新添加 import Elment from 'elemtn-plus' 
import 'element-plusdist/index.css'

等操作  创建完vue项目后
使用  npm install element-plus --save 全局安装elemntplus

加上代码后就可以使用了
官网:安装 | Element Plus

父子传递:

// 父传子
    // 定义 props 属性
    // 接收父组件传递过来的数据
    // 父组件传递过来的数据会自动映射到 props 属性上
    // definePros宏编辑函数会返回获得的数据
    // const props = defineProps({
    //     message:String,
    //     count:Number,
    // })
    // console.log(props)
// 子传父
    // const emit = defineEmits('get-sonpage-message') // 定义自定义事件
    // const sendMsg = () =>{
    //     emit('get-sonpage-message','我是方杰我是子组件')
    // }
  import {ref} from 'vue'
  const name = ref('哇哈哈')
  const setName = () =>{
    name.value = "哈哈娃"

  }
  defineExpose({
    name,
    setName
  })

注意：自定义事件：子组件主动触发事件，父组件被动接收数据。适用于子组件需要通知父组件的场景。
defineExpose：子组件暴露数据或方法，父组件主动调用或访问。适用于父组件需要直接操作子组件内部状态的场景。