vue3的语法。

import { reactive, toRefs } from 'vue';

属性跟方法定义在setup函数中,但是都需要return出去，setup函数的执行时机是beforecreate跟created之间，获取数据，可以在setup中定义，并直接执行。

 setup() {
    const state = reactive({
      areaList: [],
      controlList: [],
      areaNum: [],
    });
    const asideStart = ({ dataTransfer }: any, item: any): void => {
      dataTransfer.setData('comname',JSON.stringify(item));
    };
    const mainOver = (e: MouseEvent) => {
      e.preventDefault();
    };
    return {
      ...toRefs(state),
      asideStart,
      mainOver,
      mainDrop,
    };
  },

除了使用reactive还可以使用ref定义响应式数据。但是也需要return出去。

const areaNum = ref(['']);

通过ref创建对象,下面的方法会出错，迫于无奈。我选择了很不严谨的方法。

const areaList: Ref<Array<any>> = ref([]);
const areaList: Ref<any> = ref([]);

父组件向子组件传值，首先需要声明props，然后setup函数的第一个参数就是传过来的值。

  props: {
    mess: String,
  },
  setup(props: any) {
    const getData = ()=> {
      console.log(props.mess);
    };
    getData();
  }；

父组件监听子组件的事件：
setup函数的第二个参数是一个上下文对象，可以通过该对象获得一些属性。

  setup (props: any, context: any) {
    const remove = () => {
      context.emit('remove', index.value);
    };
    return {
      remove,
    };
  },

父组件

   <border-box" @remove="removeArea"></border-box>