TOMMYHU

 Vue2中的语法糖.sync：

在父组件中的
<div :title.sync="visible" ></div>
等同于: / .sync将针对于title的监听事件缩写 /
<div :title="visible" @update:title="visible = $event" ></div>
在子组件的methods中使用如下将新的value传给父级：

` handleClose() {        this.$emit('update:title', newValue)    }`

Vue3中用v-model替代了.sync修饰符和组件的model选项 / 不兼容 /：

针对于有参数的：<div v-model:title="visible" ></div>
等同于：<div :title="visible" @update:title="visible = $event" ></div>

Vue3中还针对于没有参数的v-model：

<div v-model="visible" ></div>
没有参数但却实际上在父组件内传入modelValue，类似于：
v-model:modelValue="visible" @updata:modelValue="visible =$event"
在父组件里是运用visible,在子组件里传入的props里的是modelValue.
更改参数，传入父级也是用modelValue
this.$emit('update:modelValue', newValue)

详情可以看Vue3的官方

.sync在Vue3的转变

先来看看Vue3的几种组件通信方式：
[codes=c#]
props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
[/codes]
下面分别介绍这几种方式的写法：

1、props
[codes=c#]
父组件



子组件

[/codes]
2、$emit

父组件
[codes=c#]



子组件


[/codes]
3、expose / ref

父组件
[codes=c#]



子组件

[/codes]
4、attrs

父组件
[codes=c#]



子组件

[/codes]
5、v-model

父组件(v-model可省略)
[codes=c#]



子组件


[/codes]
6. provide / inject

父组件
[codes=c#]


子组件

[/codes]
接下来是Vue2.x 组件通信使用方法：
1、 props

父组件
[codes=c#]


子组件
export default {
  props:{
      msg:{
          type:String,
          default:'这是默认数据'
      }
  },
  mounted(){
      console.log(this.msg)
  }
[/codes]
2、.sync
[codes=c#]
父组件


[/codes]
3、v-model
[codes=c#]
父组件


[/codes]
4、ref
[codes=c#]
子组件
export default {
    data(){
        return {
            name:""
        }
    },
    methods:{
        someMethod(msg){
            console.log(msg)
        }
    }
}

父组件


[/codes]
5、$emit / v-on
[codes=c#]
子组件
export default {
  data(){
      return { msg: "这是发给父组件的信息" }
  },
  methods: {
      handleClick(){
          this.$emit("sendMsg",this.msg)
      }
  },
}
父组件


export default {
    methods:{
        getChildMsg(msg){
            console.log(msg) // 这是父组件接收到的消息
        }
    }
}
6、children/parent
[codes=c#]
父组件
export default{
    mounted(){
        this.$children[0].someMethod() // 调用第一个子组件的方法
        this.$children[0].name // 获取第一个子组件中的属性
    }
}

子组件
export default{
    mounted(){
        this.$parent.someMethod() // 调用父组件的方法
        this.$parent.name // 获取父组件中的属性
    }
}
[/codes]
7、EventBus
[codes=c#]
// 方法一
// 抽离成一个单独的 js 文件 EventBus.js ，然后在需要的地方引入
// EventBus.js
import Vue from "vue"
export default new Vue()

// 方法二 直接挂载到全局
// main.js
import Vue from "vue"
Vue.prototype.$bus = new Vue()
[/codes]
8、Vuex（这个就不举例子了........懂的都懂！）

[codes=c#]
//testCp


//use testCp

[/codes]

[codes=c#]
               :columns="columns"
               :data-source="list"
               :rowKey="
          (record, index) => {
            return index;
          }
        ">

[/codes]

[codes=c#]
import { defineAsyncComponent } from "vue"

// simple usage
const AsyncFoo = defineAsyncComponent(() => import("./demo.vue"))

// with options
const AsyncFooWithOptions = defineAsyncComponent({
  loader: () => import("./demo.vue"),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})

[/codes]

声明
[codes=c#]
export declare interface AsyncComponentOptions {
    loader: AsyncComponentLoader;
    loadingComponent?: Component;
    errorComponent?: Component;
    delay?: number;
    timeout?: number;
    suspensible?: boolean;
    onError?: (error: Error, retry: () => void, fail: () => void, attempts: number) => any;
}
[/codes]

[codes=javascript]

[/codes]

[@vue/compiler-sfc] defineProps is a compiler macro and no longer needs to be imported
>[@vue/compiler-sfc] `defineEmits` is a compiler macro and no longer needs to be imported.

"vite": "^2.6.4",
"vue": "^3.2.16",

新版中不需要显示引入了，

Vue3.0 正式版已经发布一段时间了，除了拥抱函数式编程，还带来了新的语法糖，用以替代原本需要大量 return 的写法
基础用法
想要使用 setup 模式只要在 script 标签上面加个 setup 属性就可以了。这个模式下不需要 return 和 export 就可以在模板中使用。
[codes=c#]



[/codes]
使用 props、emit
[codes=c#]



[/codes]
使用生命周期钩子
[codes=c#]

[/codes]
setup 语法糖的缺陷
这个语法糖暂时还不支持单文件导出内容，如果使用 export 导出模块会导致编译报错。

不支持设置组件名，传统的 options 写法有个 name 属性可以设置组件名，这个在编写递归组件的时候很有用

不支持 jsx，不过如果需要使用 jsx 的话，个人还是建议直接使用传统方式，setup 函数可以直接 return 一个 jsx 函数。而且 Vue 3.0 已经默认支持 css module 了，jsx 的体验会比之前更好。
[codes=c#]



[/codes]

其他
[codes=c#]
如何导入组件 => components
在 script-setup 中导入任意的组件就可以直接在 template 中使用






如何导入指令 => directive
导入指令的用法同 导入组件






如何使用 props
通过defineProps指定当前props类型的同时，获得上下文的props对象
在script中需要props[key]引用，而template中可直接调用key




如何使用 emit
通过defineEmit指定当前组件含有的触发事件
事件通过 defineEmit 返回的上下文 emit 进行触发




如何获取 slots 和 attrs



Note
遵循 setup 函数的规则，仅在组件加载时调用一次