最近在看b站 小满zs 的vue3教程,巩固一下。
1.父–>子组件
- 父组件自定义一个属性,用v-bind 绑定在子组件上
<!-- 父组件 -->
<template>
<div class="container">
<child :par_info="par_info" :list="list"></child>
</div>
</template>
<script setup lang="ts">
import {ref,reactive} from 'vue'
import child from './child.vue'
const par_info = ref<string>('我是父组件传给子组件的值!')
const list = reactive<number[]>([100,200,300])
</script>
<!-- 子组件 -->
<template>
<div class="container">
父---子:{{par_info+'---------'+list}}
</div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
/* 1.子组件接收父组件参数一般写法 */
const props = defineProps({
par_info:{
default:'父组件没传,我默认的',
type:String
},
list:Array
})
/* 2.ts特有写法
withDefaults:定义父组件传过来的参数的默认值
*/
// const props = withDefaults(
// defineProps<{
// par_info:string,
// list:Array<number>
// }>(),{
// par_info:'父组件没传,我默认的',
// list:()=>[]
// }
// )
onMounted(()=>{
console.log(par_info);//代码中直接这样取会报错【找不到名称“par_info”】,需要用下面这种方式
console.log(props.par_info);
})
2.子–>父
<!-- 子组件 -->
<template>
<div class="container">
<el-button @click="tap">派发给父组件</el-button>
<el-button @click="tap2">派发给父组件2</el-button>
</div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
/* 1.子组件传值给父组件一般写法 */
const emit = defineEmits(['toParent','toParent2'])
/* 2.ts特有写法 */
// const emit = defineEmits<{
// (e:'toParent',name:string):void;
// (e:'toParent2',name:string):void;
// }>()
const tap = ()=>{
emit('toParent','我是子组件传给父组件的参数')
}
const tap2 = ()=>{
emit('toParent2','我是子组件传给父组件的参数2')
}
</script>
<!-- 父组件 -->
<template>
<div class="container">
<child @to-parent="fromChild" @to-parent2="fromChild2"></child>
</div>
</template>
<script setup lang="ts">
import {ref,reactive} from 'vue'
import child from './child.vue'
const fromChild = (val:string) => {
console.log(val);
}
const fromChild2 = (val:string) => {
console.log(val);
}
</script>
3.子组件暴露给父组件内部属性–defineExpose
const exposeList = reactive<number[]>([1,2,3])
defineExpose({exposeList})
<template>
<div class="container">
<child ref="childRef"></child>
</div>
</template>
<script setup lang="ts">
import {ref,reactive,onBeforeMount, onMounted} from 'vue'
import child from './child.vue'
const childRef = ref<InstanceType<typeof child>>()
onMounted(()=>{
console.log(childRef.value?.exposeList);
})