vue3 script setup 语法糖用了才知道有多爽 (二)

---

这里是完整的目录图片,由于整篇文章篇幅太长,拆分成了几篇来展示

2. 自动注册子组件

子组件代码

<!-- 子组件 -->
<template>
  <div> this is child component </div>
</template>
<script>
</script>
<style>
</style>

父组件

<template>
  <div>
    <h2>i am father component</h2>
    <!-- 使用子组件 -->
    <Child></Child>
  </div>
</template>

Vue 3 setup() 语法
Vue3 语法要求在引入子组件的时候需要先在 script 当中 import 导入,并在 components 对象当中绑定注册对应的组件,才能在模板当中使用,

<script>
import { defineComponent, ref } from 'vue';
import Child from './child.vue' 
export default defineComponent({
  components: {
        Child
  },
  setup() {
    return {      
    }
  }
});

<script setup> 语法糖的写法
直接省略了子组件注册的过程,直接导入就可以了

<script setup>
import Child from './child.vue'
</script>

小结

在 script setup 当中,引入的组件可以直接使用,无需通过 components 进行注册,而且在 script setup 范围内的值也能直接作为自定义组件的标签名使用,不需要卸载 component 对象当中

命名空间组件

3. defineProps , defienEmits()

script setup 分别提供了 defineProps 以及 defineEmits 来代替 props 接收父组件传递的数据 (父组件 ⇒ 子组件 传参)

• defineProps 来代替 props 接收父组件传递的数据 (父组件 ⇒ 子组件 传参)
• defineEmits 来代替 emit 完成子组件向父组件传递数据 (子组件向外暴露数据)

defineProps 父子传值

Vue 3 setup() 语法
父组件

<!-- 父组件 -->
<template>
  <div>
    <h2>i am father component</h2>
    <!-- 使用子组件 -->
    <Child :message="msg"></Child>
  </div>
</template>

<script>

import { defineComponent, ref } from 'vue';
import Child from './child.vue'
 
export default defineComponent({
  components: {
        Child
  },
  setup() {
    const msg = ref("this is a msg from father component")
    return {
      msg
    }
  }
});

</script>

子组件

<!-- 子组件 -->
<template>
  <div> this is child component </div>
  <h2>{{ message }}</h2>
</template>

<script>
import { defineComponent , ref} from 'vue';

export default defineComponent({
  props:{
    "message":String
  },
  setup(props,context){
    return {
      props
    }
  }  
});

</script>

可以看到我们在子组件当中对于父组件传过来的数据是从 setup() 方法的 props 参数中获取的,那么在 setup script 语法当中没有 setup() 方法,自然也就无法像之前一样通过 props 参数
来获取到 父 ==> 子的数据

<script setup> 语法糖的写法

父组件

<template>
  <div>
    <h2>i am father component</h2>
    <!-- 使用子组件 -->
    <Child :message="msg"></Child>
  </div>
</template>

<script setup>
import Child from './child.vue'
const msg = ref("this is a msg from father component")
</script>

子组件

<!-- 子组件 -->
<template>
  <div> this is child component </div>
  <h2>{{ message }}</h2>
</template>

<script setup>
const props = defineProps({
  message:String
})
</script>

• 在子组件当中 <template> 中可以直接使用父组件传递的 props (可以省略 props . )
• <script setup> 需要通过 props.xx 来获取父组件传递过来的 props

emit子父传值的使用

Vue 3 setup() 语法

父组件

<template>
  <div>
    <h2>i am father component</h2>
    <!-- 使用子组件 -->
    <Child @childEvent="getMessage"></Child>
  </div>
</template>

<script>

import { defineComponent, ref } from 'vue';
import Child from './child.vue'
 
export default defineComponent({
  components: {
        Child
  },
  setup() {
   const getMessage = (msg)=>{
    console.log("we get a msg : " + msg)
   }
    return {
      getMessage
    }
  }
});

</script>

子组件

<!-- 子组件 -->
<template>
  <div @click="childClick"> this is child component123 </div>
</template>

<script>
import { defineComponent , ref} from 'vue';

export default defineComponent({
  emits: [
    'childEvent'
  ],
  setup(props,context){
    const childClick = ()=>{
      context.emit('childEvent','click in child')
    }
    return {
      childClick
    }
  }  
})


</script>

<script setup> 语法糖的写法

父组件

<template>
  <div>
    <h2>i am father component</h2>
    <!-- 使用子组件 -->
    <Child @childEvent="getMessage"></Child>
  </div>
</template>

<script setup>
import Child from './child.vue'
const getMessage = (msg)=>{
    console.log("we get a msg : " + msg)
}  

</script>

子组件

<!-- 子组件 -->
<template>
  <div @click="childClick"> this is child component123 </div>
</template>

<script setup>
const emit = defineEmits(['childEvent'])
const childClick = ()=>{
  emit('childEvent','this is a msg from child component by script setup')
}
</script>

小结

注意 :

• defineProps defineEmits 只在 <script setup> 内有效 ( defineProps defineEmits 这两个 API 都是只能在 <script setup> 中使用的编译器宏 )

  • defineProps 接收与 props 选项相同的值
  • defienEmits 接收与 emits 选项相同的值 (我的理解是 defineProps props 参数的用法是一毛一样的 )

• 他们不需要 ! 不需要 ! 不需要 ! 手动导入, 自动在 <script setup> 中可以用

• defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推导。

• 传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。