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: '我给子元素带的一段话'}
</script>
复制代码
1.3 defineEmits传值(子传父)
//子组件
<template>
<div class="child">
我是子组件
</div>
</template>
<script setup>
import {defineEmits,onMounted} from 'vue'
const emit = defineEmits()
onMounted(()=>{
emit('getChildMsg','我是子元素,给父元素传的话')
})
</script>
//父组件
<template>
<div class="box">
<!-- 接收子组件的方法 -->
<v-child @getChildMsg="getMsg"></v-child>
</div>
</template>
<script setup>
// 引入后无需注册
import vChild from "../components/child.vue";
let getMsg = 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官网