1、ref的用法
我这边使用的是setup方式
<script lang="ts" setup>
// 步骤一，首先先引入ref
import { ref, computed, onMounted, reactive } from "vue";
// 然后再使用ref，ref是个函数。可以传一个string,number,boolean等
const viewVersionVisible = ref(false);
</script>
因为ref定义出来就是个响应式数据所以我们在template中用的时候，可以直接像使用vue2 data中数据那样的方式来使用，比如以下实例
<EditDialog
v-if="viewVersionVisible"
/>
ref在script中也就是在js中使用的时候，与在template会有所不同，因为ref的返回值中的value才是真正的响应式数据,比如我们想要改上面的viewVersionVisible为true，则可以使用下面的方式。
// 数据编辑
const handleEdit = (row: any, index: number) => {
viewVersionVisible.value = true;
};
2、reactives 的使用方式
import { reactive} from "vue";
const reactives = reactive({
formData: {
label_id: null
},
name:'张三'
});
3、props的使用方式
因为我是在set环境下使用的props ,所以可以直接使用
<script lang="ts" setup>
const props = defineProps({
value: Boolean,
editMode: String,
editData: Object,
});
// props是一个对象 使用的时候如下：
console.log(props.value)
</script>
假如我们在ts中使用props，并且想要给props设置默认值，则可以这样写
/**
* Props - vue3写法
*/
interface Props {
searchColumns: FilterColumns[];
columns: ElTableColumn[];
action: Function;
crudMethod: any;
deafultSearch: any;
}
// 字段
// 使用此方式声明的Pros有默认值
const props = withDefaults(defineProps<Props>(), {
searchColumns: () => [],
columns: () => [],
crudMethod: {
isAdd: true,
isEdit: true,
isDel: true,
},
// 接口方法 promise
action: () => {
return () => { };
},
deafultSearch: () => { }
});
const { columns, action } = props;
4、emit的用法。
在vue2中我们都知道emit的用法是子组件向父组件传递参数用的，那么在vue3的setup中能直接用吗？
// 在vue3中使用emit说先要先引入
import { defineEmits } from "vue";
// 然后再生命要使用的emits
const emits = defineEmits(["update:modelValue", "refresh"]);
// 这样我们再scritp中就可以用了
// 这个是我们定义的一个事件，然后通过事件执行emit
const onClose = () => {
emits("update:modelValue", false);
};
5、在vue3中使用onMounted 生命周期函数,首先也是要先引用的
import { onMounted} from "vue";
onMounted(() => {
const { editMode, editData } = props;
});
6、函数或者方法在vue3中的使用
<script lang="ts" setup>
// 比如我要定义一个add方法，可以直接这样写
const add = () => {
console.log('add')
}
// 非常的方便, 再比如我要在另一个方法中调用add方法
const edit= () => {
add()
}
</script>
7、computed 的使用
<script lang="ts" setup>
import { computed } from 'vue'
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
</script>
8、关于v-model的用法，假如自己要封装一个组件使用v-model
在组件中vue2的写法一般是用prop中value接收，并使用emit('input')出去
那么在vue3中的使用方法呢？
比如我封装了一个上传组件，使用方式是这样的
<ImageUpload v-model="image" />
那么我在组件内部又做了什么事情呢？
const emits = defineEmits(['update:modelValue'])
// 1、接收值
interface Props {
modelValue: any
}
const props = withDefaults(defineProps<Props>(), {
modelValue: {},
})
// 2、上传成功钩子
const handlesSuccess = (val: any) => {
emits('update:modelValue', val.data) // 这个很关键
}
