1.起初vue2.0+暴露變量必須return出來结榄，template中才能使用耘柱。
vue3.0+現(xiàn)在只需在script標(biāo)簽中添加setup。
組件只需引入不用注冊袭祟，屬性和方法也不用返回，也不會(huì)寫setup函數(shù)捂贿，也不用export default纠修，甚至是自定義指令也可以在我們的tempate中自動(dòng)獲得。
<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標(biāo)簽扣草，HTML5提供的新標(biāo)簽，更加規(guī)范和語義化 颜屠；可以把列表項(xiàng)放入template標(biāo)簽中辰妙，然后進(jìn)行批量渲染。
2.在HTML頁面中復(fù)制以上代碼甫窟，發(fā)現(xiàn)在瀏覽器并沒有渲染出任何信息密浑，這是因?yàn)閠emplate標(biāo)簽內(nèi)容天生不可見，設(shè)置了display：none粗井；屬性尔破，同樣我們也需要留意一些js操作template標(biāo)簽的具體事項(xiàng)：
<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組件自動(dòng)注冊
Vue3.0+無需通過components進(jìn)行注冊
在語法糖中，引入的組件可以直接使用浇衬，無需通過components進(jìn)行注冊懒构，并且無法指定當(dāng)前組件的名稱，他會(huì)自動(dòng)以文件名為主耘擂，也就是不用再寫name屬性
// in <script setup>
//將 SFC 與 一起使用時(shí)<script setup>胆剧，導(dǎo)入的組件會(huì)自動(dòng)在本地注冊：
<script setup>
import ComponentA from './ComponentA.vue'
</script>
<template>
<ComponentA />
</template>
// in non-<script setup>
//創(chuàng)建組件的唯一出/入口，創(chuàng)建ComponentA.js文件
import ComponentA from './ComponentA.js'
export default {
components: {
ComponentA
},
setup() {
// ...
}
}
Vue2.0+注冊組件醉冤、聲明組件名稱
components詳解：
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一秩霍。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼冤灾。在較高層面上前域，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能韵吨。在有些情況下，組件也可以表現(xiàn)為用 is 特性進(jìn)行了擴(kuò)展的原生 HTML 元素移宅。
提示：所有的 Vue 組件同時(shí)也都是 Vue 的實(shí)例归粉，所以可接受相同的選項(xiàng)對象 (除了一些根級特有的選項(xiàng)) 并提供相同的生命周期鉤子。
// in non-<script setup>
//創(chuàng)建組件的唯一出/入口漏峰，創(chuàng)建ComponentA.js文件
import ComponentA from './ComponentA.js'
export default {
components: {
ComponentA
},
setup() {
// ...
}
}
3.使用setup后新增API
因?yàn)闆]有了setup函數(shù)糠悼，那么props、emit怎么獲取
語法糖提供了新的API供我們使用
vue3.0+中通過defineProps浅乔、defineEmits倔喂、defineExpose
1.defineProps獲取組件傳值 （defineProps接受與props選項(xiàng)相同的值）
vue2.0中Props 聲明:
Vue 組件需要明確的 props 聲明铝条，以便 Vue 知道傳遞給組件的外部 props 應(yīng)該被視為 fallthrough 屬性
fallthrough:
“fallthrough 屬性”是v-on傳遞給組件的屬性或事件偵聽器，但未在接收組件的props或emits中顯式聲明席噩。這方面的常見示例包括class班缰、style和id屬性。
<script>
// in non-<script setup>
export default {
props: {
title: String,
likes: Number
}
}
</script>
如果不希望組件自動(dòng)繼承屬性悼枢，可以inheritAttrs: false在組件的選項(xiàng)中進(jìn)行設(shè)置埠忘。
<script>
// use normal <script> to declare options
export default {
inheritAttrs: false
}
</script>
2.defineEmits子組件向父組件時(shí)間傳值（defineEmits接受與選項(xiàng)相同的值emits）
// in non-<script setup>
//聲明組件發(fā)出的自定義事件。
export default {
emits: ['check'],
created() {
this.$emit('check')
}
}
vue2.0中 關(guān)于$emit的用法
//父組件：
<template>
<div>
<div>父組件的toCity{{toCity}}</div>
<train-city @showCityName="updateCity" :sendData="toCity"></train-city>
</div>
//子組件：
<template>
<br/><button @click='select(`大連`)'>點(diǎn)擊此處將‘大連’發(fā)射給父組件</button>
</template>
<script>
export default {
name:'trainCity',
props:['sendData'], // 用來接收父組件傳給子組件的數(shù)據(jù)
methods:{
select(val) {
let data = {
cityname: val
};
this.$emit('showCityName',data);//select事件觸發(fā)后馒索，自動(dòng)觸發(fā)showCityName事件
}
}
}
</script>
3.defineExpose暴露自己屬性
