Vue3使用

1、列表实现

vue3 中无法使用slot-scope的问题

vue2：上下对应，title是自己随便起的名字

1、定义一个普通的插槽，可以用div，任何标签

2、定义一个element列表里面插槽的标签

vue3：上下对应，title是自己随便起的名字

1、注意，vue3中只能用template, # 等同于 slot=

2、注意，vue3中只能用template, # 等同于 slot=

 2、el-dialog实现

      
        
          
            
              
            
          
          
            
              
            
          
        
        
          
            
              
                
                
              
            
          
          
            
              
            
          
        
        
          
            
              
            
          
          
            
              
                {{dict.label}}
              
            
          
        
        
          
            
              
            
          
        

      
      

        保 存
        {{buttonName}}
      
    

2.1、vue3 中无法使用:visible.sync的问题

:visible指的是属性绑定，表示弹框的显示隐藏。当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏。:visible.sync指的就是同步动态双向的来表示visible的值。

在vue3中取而代之的是v-model，将:visible.sync  改为  v-model

2.2、submitForm提交校验form表单

3、分页实现

vue3 Element-UI 插件 Pagination 显示为英文问题

在mains.js 里添加

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// en是英文 zh-cn 是中文
app.use(ElementPlus, {
  locale: zhCn,
})

4、$message提示消息

5、监听

5.1普通监听

5.2深度监听

6、onMounted钩子函数

7、reactive 和 ref区别

1、reactive 和 ref 是 Vue 3 中的两种响应式数据绑定方式，ref 适用于简单的响应式数据，而 reactive 则适用于复杂对象或数组的响应式数据。

2、ref：使用 .value 属性来访问和修改值。

3、reactive：可以直接访问和修改对象或数组的属性或元素，而无需使用 .value。

8、父子组件相互调用

1、父组件

3、效果

9、完整demo代码

 9.1、app.vue

9.2、child.vue

package.json中设置rules

"rules": {
      "no-undef": "off",
      "no-unused-vars": "off",
      "vue/multi-word-component-names": "off"
    }