Vue3.x语法糖script setup和相关API的使用

Vue3.x语法糖script setup和相关API的使用

前言：随着Vue3.2版本的更新，script-setup语法糖也随之产生，免去了写setup函数和export default的繁琐步骤，自定义指令可以直接获得并使用，文章侧重于组件以及组件传参使用，响应式相关内容详见文档Vue3文档

1.组件自动注册

• 区别于Vue2.x，使用script setup语法糖后，引入自定义组件时可以免去components注册的过程，直接引入组件，需要注意不能使用name属性修改组件名称了，实例如下：

  <template>
      <Count></Count>
  </template>
  <script setup>
      import Count from '../components/Count.vue'
  </script>
  

2.defineProps的使用

• defineProps用来接收父组件传来的props

• 父组件代码：

  <template>
      <p>父组件</p>
      <Count :count="num"></Count>
  </template>
  <script setup>
      import Count from '../components/Count.vue'
      import { ref } from 'vue'
      let num = ref(666)
  </script>
  

• 子组件代码：

  <template>
      <div>
        子组件{{ count }}
      </div>
  </template>
  <script setup>
    import { defineProps } from 'vue'
  
    defineProps({
     count:{
       type: Number,
       default: 6
     }
   })
  </script>
  

3.defineEmits的使用

• 子组件向父组件事件传递（子组件触发父组件事件）

• 父组件代码：

  <template>
      <p>父组件</p>
      <Count @handleEvent="showData"></Count>
  </template>
  <script setup>
    import Count from '../components/Count.vue'
    const showData = (data) => {
      console.log(data); // 子组件触发父组件事件
    }
  </script>
  

• 子组件代码：

  <template>
      <div>
          子组件
      	<button @click="handleEvent">触发事件</button>
      </div>
  </template>
  <script setup>
      import { defineEmits } from 'vue'
      const em = defineEmits(['handleEvent'])
      function handleEvent() {
        em('handleEvent', '子组件触发父组件事件')
      }
  </script>
  

3.1.结合defineProps和defineEmits

• 结合defineProps和defineEmits做一个点击按钮后子组件数值+1的自定义组件

• 父组件代码：

  <template>
      <p>父组件</p>
      <Count @handleEvent="showData" :count="num"></Count>
  </template>
  <script setup>
    import Count from '../components/Count.vue'
    import { ref } from 'vue'
    const num = ref(0)
    const showData = (data) => {
      num.value++ // 数值+1
      console.log(data); // 子组件触发父组件事件
    }
  </script>
  

• 子组件代码：

  <template>
    <div>
      子组件数值{{count}}
      <button @click="handleEvent">触发事件</button>
    </div>
  </template>
  <script setup>
  import { defineEmits, defineProps } from 'vue'
  defineProps({
    count: {
      type: Number,
      default: 0,
    }
  })
  const em = defineEmits(['handleEvent'])
  function handleEvent() {
    em('handleEvent', '子组件触发父组件事件')
  }
  </script>
  

4.defineExpose的使用

• 将组件中自己的属性暴露，在父组件中能够拿到

• 父组件代码：

  <template>
      <List ref="sonRef"></List>
      <button @click="getSonData">获取子组件暴漏的值</button>
  </template>
  <script setup>
      import List from '../components/list.vue'
      import { ref } from 'vue'
      const sonRef = ref()
      function getSonData() {
        console.log('子组件中ref暴漏的数值', sonRef.value.sonNum) // 子组件中ref暴漏的数值 0
        console.log('子组件中reactive暴漏的字符串', sonRef.value.sonName.name) // 子组件中reactive暴漏的字符串 小明
      }
  </script>
  

• 子组件代码：

  <template>
    <div class="list-card">
      这是子组件
    </div>
  </template>
  <script setup>
      import { defineExpose, reactive, ref } from 'vue'
      let sonNum = ref(0)
      let sonName = reactive({
        name: '小明'
      })
      defineExpose({
        sonNum,
        sonName
      })
  </script>
  

5.useAttrs的使用

• 父组件传递给子组件的属性中除了props、class、style外的属性

• 父组件代码：

  <template>
      父组件
      <List a="1" b="2"></List>
  </template>
  <script setup>
      import List from '../components/list.vue'
  </script>
  

• 子组件代码：

  <template>
      子组件
  </template>
  <script setup>
      import { useAttrs } from 'vue'
      const attrs = useAttrs()
      console.log(attrs)
  </script>
  

• 打印结果如下：

以上就是Vue3.x中和组件相关API的使用与demo实例，欢迎补充与讨论🌈