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

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

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。

1.组件

1.1组件引用

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

<template>
  <div class="box">
    <!-- 子组件引用 -->
   <v-child></v-child>
  </div>
</template>
<script setup>
// 引入后无需注册
import vChild from '../components/child.vue'
</script>

1.2 defineProps传参(父传子)

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

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

1.3 defineEmits传值（子传父）

//子组件
<template>
    <div class="child">
        我是子组件
    </div>
</template>
<script setup>
import {defineEmits,onMounted} from 'vue'
const emit = defineEmits()
onMounted(()=>{
    emit('getChildMsg','我是子元素，给父元素传的话')
    emit('secChildMsg','我是子组件，这是传给父组件的第二句话')
})
</script>
​
​
​
//父组件
<template>
  <div class="box">
    <!-- 接收子组件的方法 -->
    <v-child @getChildMsg="getMsg" @secChildMsg="hSecChildMsg"></v-child>
  </div>
</template>
<script setup>

// 引入后无需注册
import vChild from "../components/child.vue";

let getMsg = e => {
  console.log(e); //我是子元素，给父元素传的话
};
const hSecChildMsg = e => {
  console.log(e); // 我是子组件，这是传给父组件的第二句话
};
</script>

1.4defineExpose(父拿子方法)

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

//子组件
<template>
    <div class="child">
        {{val}}
    </div>
</template>
<script setup>
import {ref,defineExpose} from 'vue'
let val = ref('我是子组件')
let fn = ()=>{
    val.value='我改变了子组件'
}
// 暴露val和fn
defineExpose({
    val,fn
})
</script>
​
​
​
//父组件
<template>
  <div class="box">
    <!-- 接收子组件的方法 -->
    <v-child ref ='child'></v-child>
  </div>
</template>
<script setup>
// 引入后无需注册
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

//vuex
import { createStore } from 'vuex'
​
export default createStore({
  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: {
  }
})

<script setup>
import {useStore} from 'vuex'
import {onMounted} from 'vue'
// vuex实例
const store =new useStore();
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>

同时也可以使用分发(…mapActions,…mapState等方法)，具体参照Vuex官网

Vue3 setup语法糖勾子函数使用简易教程（上）

转自：https://juejin.cn/post/7045179208359739399

父组件

<template>
  <h3>父组件</h3>
  <div>{{ num }}</div>
  <div ref="box">使用ref获取dom</div>
  <div>watch监听数据-{{ watchVal }}</div>
  <about-view
    ref="child"
    :datas="num"
    :datas2="num"
    @getChildVal="hGetChildVal"
  />
</template>
<script setup>
import aboutView from "./AboutView.vue";
import {
  ref,
  reactive,
  onMounted,
  nextTick,
  computed,
  watch,
  // useRouter,
  // useRoute,
} from "vue";

// 路由跳转并且传参
// const router = useRouter();
// router.push({ path: "/about", query: { name: "123" } });

// // 路由接参
// const route = useRoute();
// nextTick(() => {
//   console.log(route.query);
// });

// 父组件获取子组件传来的数据
const hGetChildVal = (val) => {
  console.log(val);
};

// 父组件调用子组件方法
let child = ref();
onMounted(() => {
  child.value.childFun();
});

// ref与onMounted滴使用
let num = ref(123);
console.log(num);
onMounted(() => {
  console.log("onMounted执行了");
  setNum();
});
const setNum = () => {
  setInterval(() => {
    num.value++;
  }, 1000);
};

// 通过ref获取box元素，只需要定义一个名字为上方ref相同的名字即可
let box = ref();
nextTick(() => {
  console.log(box.value);
});

// reactive滴使用
let obj = reactive({
  name: "张三",
  age: 20,
});
obj.name = "lili";
console.log(obj);

// computed滴使用
let com1 = computed(() => {
  return 12345;
});
console.log(com1);

// watch滴使用
let watchVal = ref(0);
watch(
  () => num.value,
  (newV, oldV) => {
    watchVal.value = newV + oldV;
    console.log(newV, oldV);
  },
  {
    deep: true,
  }
);
</script>

子组件

<template>
  <div class="about">
    <h3>子组件</h3>
    <div>父传子数据: {{ prop.datas }}-{{ prop.datas2 }}</div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, onMounted, defineExpose } from "vue";

// 子组件获取父组件传过来滴数据
const prop = defineProps({
  datas: Number,
  datas2: Number,
});

// 子组件像父组件传递数据
const emit = defineEmits({});
onMounted(() => {
  emit("getChildVal", "我是子组件传过来的内容");
});

const childFun = () => {
  console.log("我是子组件方法,在父组件调用了。");
};

// 暴露子组件方法，方便父组件直接调用
defineExpose({
  childFun,
});
</script>