vue3.2中setup语法糖与vue2.0script 区别

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选项相同的值）

image.png

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）

image.png

// 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暴露自己属性

image.png 最后编辑于 ： 2022.04.13 15:53:30 © 著作权归作者所有,转载或内容合作请联系作者