Vue组合式api

<script setup>
</script>

setup特点：

1. script中间的内容就是一个对象
2. script第一层定义的方法或变量就是该对象的属性，且第一层的绑定会暴露给模板
3. script默认执行生命周期beforeCreate  created

使用

• setup 的方式无需注册，可直接使用

  <script setup>
  	import Home from './components/Home.vue'
  </script>
  <template>
  	<Home></Home>
  </template>
  

• ref 和 reactive 的使用（响应式）

  * `ref`在获取或者是设置的时候,需要使用value,在模板中不需要
  * `reactive`不需要使用value
  * `ref`可以定义任意类型
  * `reactive`只能是对象
  

  import {ref,reactive} from 'vue'
  let count = ref(10);
  let count1 = reactive({name:"张三",age:18})
  // 点击事件函数
  const btn = () =>{
    console.log("获取",count.value);
    console.log("获取",count1.name);
  }
  

• 父传子

  <!-- 父组件 -->
  <About :msg="{name:'张三',age:18,gender:'男'}"></About>
  

  // 子组件
  // 语法1：数组写法
  defineProps(["msg"])
  // 语法2：对象写法
  defineProps({
      msg:{
          type:Object,
          default:()=>[]
      }
  })
  

• 子传父

  // 子组件
  const emit = defineEmits(["sendParent"])
  const btn = () =>{
      //调用父组件的自定义事件
      emit("sendParent",[1,2,3])
  }
  

  <About @sendParent="abc"></About>
  

• 生命周期

  // 使用mounted
  import {onMounted} from 'vue'
  onMounted(()=>{
      console.log(about.value.name);
  })
  

• 子组件暴露内容

  // 子组件
  defineExpose({
      name:"张三",
      age:18,
      gender:"男"
  })
  

  <script setup>
  	import About from './components/About.vue'
      import { ref } from 'vue'
      // 用一个变量来接收这个实例
  	const about = ref('')
  </script>
  <template>
  	<!-- 获取组件的实例 -->
      <About ref="about"></About>
  </template>
  

• 动态组件

  <component :is="count%2==1?Home:About"></component>
  

• script 标签可以写多个

  <script>
      export default{
          inheritAttrs:false
      }
  </script>
  <script setup>
  </script>
  

• Vue2区分原生事件和自定义事件

  click.native 表示原生事件
  

• 自定义指令

  const vFocus = {
      mounted(el){
          el.style.color = "red",
          el.focus();
      }
  }
  <template>
  	<!-- 使用 -->
  	<input type="text" v-focus>
  </template>
  

• 插槽

  <script setup>
  import {useSlots} from 'vue' // 导入
  let slots = useSlots(); // 使用
  // 获取插槽内容
  console.log(slots.abc());
  console.log(slots.default());
  </script>
  <template>
      <div>
          <slot></slot>
          <slot name="abc"></slot>
      </div>
  </template>
  

  <!-- 使用 -->
  <script setup>
  import About from './components/About.vue'
  </script>
  <template>
      <About>
          <template #default>
              <button>默认插槽</button>
          </template>
          <template #abc>
              <button>具名插槽</button>
          </template>
      </About>
  </template>