1.起初vue2.0+暴露变量必须return出来，template中才能使用。
vue3.0+现在只需在script标签中添加setup。
组件只需引入不用注册，属性和方法也不用返回，也不会写setup函数，也不用export default，甚至是自定义指令也可以在我们的tempate中自动获得。
<template>
<my-component:num="num" @click="addNum">
</template>
<script setup>
import {ref} from 'vue';
import MyComponent from'./MyComponent.vue';
//像平常的setup中一样的写，单不需要返回任何变量
conset num =ref(0)
const addNum=()=>{numm.value++}
</script>
vue2.0中template
1.template标签，HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染。
2.在HTML页面中复制以上代码，发现在浏览器并没有渲染出任何信息，这是因为template标签内容天生不可见，设置了display：none；属性，同样我们也需要留意一些js操作template标签的具体事项：
<script>
export default{
data() {
return {
todos: [
{
id: 1,
text: 'Learn to use v-for'
},
{
id: 2,
text: 'Learn to use key'
}
]
}
}
}
<ul>
<template v-for="todosin item" :key="item.id">
<li>
{{ item.text }}
</li>
</template>
</ul>
</script>
2.使用Setup组件自动注册
Vue3.0+无需通过components进行注册
在语法糖中，引入的组件可以直接使用，无需通过components进行注册，并且无法指定当前组件的名称，他会自动以文件名为主，也就是不用再写name属性
// in <script setup>
//将 SFC 与 一起使用时<script setup>，导入的组件会自动在本地注册：
<script setup>
import ComponentA from './ComponentA.vue'
</script>
<template>
<ComponentA />
</template>
// in non-<script setup>
//创建组件的唯一出/入口，创建ComponentA.js文件
import ComponentA from './ComponentA.js'
export default {
components: {
ComponentA
},
setup() {
// ...
}
}
Vue2.0+注册组件、声明组件名称
components详解：
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
提示：所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
// in non-<script setup>
//创建组件的唯一出/入口，创建ComponentA.js文件
import ComponentA from './ComponentA.js'
export default {
components: {
ComponentA
},
setup() {
// ...
}
}
3.使用setup后新增API
因为没有了setup函数，那么props、emit怎么获取
语法糖提供了新的API供我们使用
vue3.0+中通过defineProps、defineEmits、defineExpose
1.defineProps获取组件传值 （defineProps接受与props选项相同的值）
vue2.0中Props 声明:
Vue 组件需要明确的 props 声明，以便 Vue 知道传递给组件的外部 props 应该被视为 fallthrough 属性
fallthrough:
“fallthrough 属性”是v-on传递给组件的属性或事件侦听器，但未在接收组件的props或emits中显式声明。这方面的常见示例包括class、style和id属性。
<script>
// in non-<script setup>
export default {
props: {
title: String,
likes: Number
}
}
</script>
如果不希望组件自动继承属性，可以inheritAttrs: false在组件的选项中进行设置。
<script>
// use normal <script> to declare options
export default {
inheritAttrs: false
}
</script>
2.defineEmits子组件向父组件时间传值（defineEmits接受与选项相同的值emits）
// in non-<script setup>
//声明组件发出的自定义事件。
export default {
emits: ['check'],
created() {
this.$emit('check')
}
}
vue2.0中 关于$emit的用法
//父组件：
<template>
<div>
<div>父组件的toCity{{toCity}}</div>
<train-city @showCityName="updateCity" :sendData="toCity"></train-city>
</div>
//子组件：
<template>
<br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
</template>
<script>
export default {
name:'trainCity',
props:['sendData'], // 用来接收父组件传给子组件的数据
methods:{
select(val) {
let data = {
cityname: val
};
this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件
}
}
}
</script>
3.defineExpose暴露自己属性
