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 optionsexport 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袒露本身属性
|
