在不动产项目中收获的经验

在element-plus里头很多针对于2的旧样式已经不好用。包括一些语法也被取消，强行使用就会出现问题报错。

在输入框加入图标或者其他文字的方法

<el-input size="small" type="password" auto-complete="off" placeholder="请输入密码" v-model.number="numberValidateForm.password" autocomplete="off">
// 在输入框加入图标或者其他文字的方法
  <template #prefix><i class="icon-mima" /></template>
</el-input>

使用slot的老方式是行不通的！

修改插件封装好的样式
如果给样式框架修改样式的话，直接到浏览器里头找到可能能通过修改实现自己业务需求的样式，进行修改。在浏览器中调试好了，直接通过:deep修改样式。

.el-input {
	:deep(.el-input__wrapper) {
		padding-bottom: 10px;
		text-indent: 15px;
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 0;
		color: #333;
		border-bottom: 1px solid rgb(235, 237, 242);
	}
	.el-input__prefix {
		i {
			padding: 0 5px;
			font-weight: 600;
			font-size: 18px !important;
		}
	}
}

setup组件化的用法经验
1.props在setup中的使用
props在模板中是可以直接调用的。

props对象是不能直接在setup中解构出来的会丢失响应式。总之，通过reactive绑定的响应式都不可以通过解构，会丢失响应式。目前使用props最直接的方法还是props.xxx调用。

export default {
  name: 'Test',
  props: ['name', 'age'],
  // setup(props, context) { // 有的时候会这样写，你可能只用得到emit
  setup(props,{attrs, slots, emit}) // 如果你都用得到你可以这样解构的写出来，这个不是响应式的，所以可解构
   // 错误写法 const {name} = props 这里我理解你肯定想直接就使用name，age等
   // 这个props是一个响应式的Proxy对象，不可以解构，解构后悔失去响应，如果要用解构的方式，要用toRefs
    let { name, age } = toRefs(props)
    // 现在是不是感觉可以直接就用操作name和age了，天真，转成ref了，所有的访问值都要xx.value
   console.log(name.value,age.value)
   // 所以倒回去，是不是觉得还不如直接用props.name直接访问代理对象的值要好点
   console.log(props.name, props.age)
 
   // context 
   // 看到这个context的参数你应该知其意了撒
   //  attrs: 相当于vue2.0的$attrs,意思就是传进来的属性值除了props接受的那部分
   // slots: 就是插槽，你要获取插槽的什么值的话可以用这个
   // 插槽这里解释下，可能有部分人不知道咋拿值，顺便说下，这里vue3.0的所有响应式数据都是Proxy对象，所以你取值的时候都是proxy.xxx获取
   slots.default(args => {
    console.log('这里就是你在vue2.0里看到的所有slot的数组，就可以取你要哪个插槽的值了', args)
   })
   // emit: 这个是vue2.0 的$emit
   emit('方法名', '参数') // vue2.0 this.$emit('方法名', '参数')
    ...
  }
}

2.ref
目前vue团队在优化ref.value的获取方式，但是还是使用ref.value的方式最块获取。未来可能会使用$ref获取。

动态组件使用

使用动态组件，vue2是 components 而 vue3是 component ，一个有s,一个没有。

删除对象中为空的值
有时候需要删除对象为空的值，避免参数传递出错。

Object.keys(s).map((item) => {
        if (!s[item]) {
          delete s[item];
        }
        return true;
      });

获取组件setup return出去的值

let parentData = getCurrentInstance().parent.proxy
不能使用ctx,因为他在生产环境是一个空对象。