setup(){}

  • 无参数，直接const，并return

    1. setup() {
    2.       const bool = ref(false);
    3.       return {bool};
    4.   }

  • 第一个参数 props，第二个参数 context

setup( props, context )
props: { }
context.emit( )

  1.  props: {
  2.         value: Boolean
  3.     },
  5. setup(props, context) {
  6.         const toggle = () => {
  7.             context.emit("update:value", !props.value);
  8.         };
  9.         return {toggle};
  10.     }

v-model

v-model:value=”bool”
context.emit(“update:value”, !props.value);

  1. <template>
  2.     <Switch v-model:value="bool" />
  3. </template>
  4. -------------------------------------------
  5. <script lang="ts">
  6. setup() {
  7.         const bool = ref(false);
  8.         return {bool};
  9.     }
  10. </script>
  1. <template>
  2. <button @click="toggle" :class="{ checked: value }"></button>
  3. </template>
  4. ---------------------------------------------
  5.   <script lang="ts">
  6. import {
  7.     ref
  8. } from "vue";
  9. export default {
  10.     props: {value: Boolean},
  11.     setup(props, context) {
  12.         const toggle = () => {
  13.             context.emit("update:value", !props.value);
  14.         };
  15.         return {toggle};
  16.     }
  17. };
  18. </script>

props

先声明，再使用 props: {value: Boolean},

  1. props: {value: Boolean},
  2.     setup(props, context) {
  3.         const toggle = () => {
  4.             context.emit("update:value", !props.value);
  5.         };
  6.         return {toggle};
  7.     }

props V.S. attrs 区别

props 要先声明才能取值，attrs 不用先声明
props 不包含事件，attrs 包含
props 没有声明的属性，会跑到attrs 里
props 支持string 以外的类型，attrs 只有string 类型

Vue 属性继承

默认属性传给根元素
inheritAttrs: false 禁用之
v-bind=”$attrs”或 context.attrs

UI组件库相关

UI 库的 CSS 注意事项

  • 不能使用scoped

因为 data-v-xxx中的 xxx 每次运行可能不同
必须输出稳定不变的 class 选择器，方便使用者覆盖

  • 必须加前缀

button 不行，很容易被使用者覆盖puzzle-button 可以，不太容易被覆盖 theme-link 不行，很容易被使用者覆盖
puzzle-theme-link 可以，不太容易被覆盖

  • CSS最小影响原则

绝对不能影响使用者
先引入组件scss：[class^=”puzzle-“],[class=” puzzle-“]
再引入通用scss：