vue3 + ts ＜script setup＞语法糖

这里是引用

1.data
2.computed
3.父传子
4.子传父
5.原型链绑定和组件使用
6.父子组件 v-model
7.nextTick
8.插槽
9.路由useRoute和useRouter
10.路由守卫
11.生命周期
12.父组件调子组件的方法 ref
13.store
14.watch

1.data

<template>
  <h1>{
   {
    name }}</h1>
  <h1>{
   {
    state.age }}</h1>
  <h1>{
   {
    sex }}</h1>
</template>

<script setup lang="ts">
import {
    reactive, ref, toRefs } from 'vue'
  // ref声明响应式数据，用于声明基本数据类型
  //const name = ref('东东吖')
    const name =ref<string>("")
  // 修改
  name.value = '小鲁班'

  // reactive声明响应式数据，用于声明引用数据类型
  const state = reactive({
   
    age: 24,
    sex: '男'
  })
  // 修改
  state.age = 24
  
  // 使用toRefs解构  template可直接使用{
   {name}}、{
   {sex}}
  const {
   age, sex} = toRefs(state)
  
</script>

2.computed

<template>
  <h1>{
   {
    count }}</h1>
  <h1>{
   {
   doubleCount}}</h1>
</template>

<script setup lang="ts">
import {
    ref,computed } from 'vue'
 // ref声明响应式数据，用于声明基本数据类型
  const count = ref(1)
  //computed获取双倍count' 
  const doubleCount =computed(()=>{
   
    return count.value*2
  })
</script>

3.父传子

父组件

<script setup lang="ts">
// 引入子组件(组件自动注册)
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="东东吖" />
</template>

<style>

</style>

子组件

<template>
{
   {
   props.msg}}
<!-- 可省略props 
  <h1>{
   {
    msg }}</h1>
</template>

<script setup lang="ts">
// import { defineProps } from 'vue'
// defineProps在<script setup>中自动可用，无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineProps: true】

// 声明props
const props = defineProps({
   
  msg: {
   
    type: String,
    default: "",
  },
});
</script>

4.子传父

//父组件：
<template>
  <HelloWorld :msg='state.msg' @changeMsg="changeMsg" />
</template>

<script setup lang="ts">
import {
    reactive } from "vue";
// 引入子组件(组件自动注册)
import HelloWorld from "./components/HelloWorld.vue";

const state = reactive({
   
  msg: "我是父组件原本的值",
});

const changeMsg = (val) => {
   
  state.msg = val;
};
</script>

子组件

//子组件：
<template>
  <h1>{
   {
    msg }}</h1>
<!-- 调用子传父事件 
  <button @click="changeMsg">点我</button>
</template>

<script setup lang="ts">
import {
    defineEmits } from "vue";
// import { defineEmits, defineProps } from 'vue'
// defineEmits和defineProps在<script setup>中自动可用，无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】

// 声明props
const props = defineProps({
   
  msg: {
   
    type: String,
    default: "",
  },
});

// 声明emit
const emit = defineEmits(["changeMsg"]);

// 声明子传父事件
const changeMsg = () => {
   
  emit("changeMsg", "我是子组件传过来的值");
};
</script>

5.原型链绑定和组件使用

main.ts

//main.ts

// 创建vue实例
const app=createApp(App)
// 获取原型
const prototype = app.config.globalProperties
// 绑定参数
prototype.name = '我是挂载在全局上的属性'
//第二种方式：
let helper = new TzPdmHelper(webSite);
app.config.globalProperties.$helper = helper;

//组件内获取使用
//引入
import {
    getCurrentInstance } from "vue";
// 获取原型
const {
    proxy } = getCurrentInstance();
// 输出
console.log(proxy.name);
console.log(proxy.$helper)