Vue3 setup语法糖使用简易教程（下

1.组件

1.1组件引用

组件在props里直接引入就可在template里直接使用，无需再进行注册。

<template>
  <divclass="box">
    <!-- 子组件引用 -->
   <v-child></v-child>
  </div></template><scriptsetup>// 引入后无需注册import vChild from'../components/child.vue'</script>复制代码

1.2 defineProps传参(父传子)

父元素传递给子元素的数据，子元素使用defineProps进行接收

//父元素
<template>
  <divclass="box">
    <!-- 子组件引用 -->
   <v-childmsg='我给子元素带的一段话'></v-child>
  </div></template>
​
​
//子元素
<template>
    <divclass="child">
        我是子组件
    </div></template><scriptsetup>import {defineProps} from'vue'// 在接收时候也得注意，vue3 props接收必须规定数据类型，如果父元素数据类型出错，那么会报错const props = defineProps({msg:String})
console.log(props); //  Proxy {msg: '我给子元素带的一段话'}</script>复制代码

1.3 defineEmits传值（子传父）

//子组件
<template>
    <divclass="child">
        我是子组件
    </div></template><scriptsetup>import {defineEmits,onMounted} from'vue'const emit = defineEmits()
onMounted(()=>{
    emit('getChildMsg','我是子元素，给父元素传的话')
})
</script>
​
​
​
//父组件
<template>
  <divclass="box">
    <!-- 接收子组件的方法 -->
    <v-child @getChildMsg="getMsg"></v-child>
  </div></template><scriptsetup>// 引入后无需注册import vChild from"../components/child.vue";
letgetMsg = e => {
  console.log(e); //我是子元素，给父元素传的话
};
</script>复制代码

1.4defineExpose(父拿子方法)

在vue2中是使用this.refs.子组件名称.xxx方法，即可拿到子组件定义的值或者方法，在vue3中没办法这么拿取，必须子组件暴露后父组件才可以拿取到，具体实现看代码。

//子组件
<template>
    <divclass="child">
        {{val}}
    </div></template><scriptsetup>import {ref,defineExpose} from'vue'let val = ref('我是子组件')
letfn = ()=>{
    val.value='我改变了子组件'
}
// 暴露val和fndefineExpose({
    val,fn
})
</script>
​
​
​
//父组件
<template>
  <divclass="box">
    <!-- 接收子组件的方法 -->
    <v-childref ='child'></v-child>
  </div></template><scriptsetup>// 引入后无需注册import vChild from"../components/child.vue";
import {ref,onMounted} from'vue';
// 获取child实例let child = ref()
onMounted(()=>{
  console.log(child.value.val);//直接打印：我是子组件，并不需要加.value
  // 执行子组件的fn函数
  child.value.fn()
})
</script>复制代码

2.vuex

在新的vue3中，肯定也猜到了，不是使用this.$store调用的了，是引入调用，下面就是教大家如何在vue3中如何使用vuex

//vueximport { createStore } from'vuex'
​
exportdefaultcreateStore({
  state: {
    num:1
  },
  mutations: {
    /**
     * @description: 修改num成新的num
     * @param {*} state 上方的state对象
     * @param {Number} newNum 新的num数值
     * @return {*} none
     */    
    setNum(state,newNum) {
      state.num = newNum
    }
  },
  actions: {
    // 异步递增num
    addAsync(store){
      setTimeout(()=>{
        console.log(store.state.num+=10);
      },1000)
    }
  },
  modules: {
  }
})
​
复制代码

<scriptsetup>import {useStore} from'vuex'import {onMounted} from'vue'// vuex实例const store =newuseStore();
onMounted(()=>{
  // 调用state中的title，并且加1
  store.state.num+=1
  store.state.num+=1
  console.log(store.state.num);//3
  // 调用mucation里的setNum方法，第二个参数为setNum方法里的第二个参数
  store.commit('setNum',10);
  console.log(store.state.num);//已经修改成10了
  // 调用action里的addAsync方法
  store.dispatch('addAsync')//输出结果：20
})
</script>复制代码

**3.结尾