1.Props:
父子传参
父组件:
在父组件内引入子组件,并且给子组件绑定一个money参数。
<template>
<div>
//并且给子组件绑定一个money参数
<Child :money="money"></Child>
</div>
</template>
<script setup lang="ts">
//引入子组件
import Child from './AboutView.vue'
import {ref} from 'vue'
//参数为1111
const money=ref(1111)
</script>
<style scoped>
</style>
子组件:
子组件用defineProps接收从父组件传递过来的参数,可以直接使用。
<template>
<div>
{{ props.money }}
</div>
</template>
<script setup lang="ts">
const props=defineProps(['money'])
console.log(props);
</script>
<style scoped>
</style>
props中的数据通常是只读的,子组件不能修改从父组件传递下来的数据
2.$emit
子父传参
在vue框架中事件分为两种:一种是原生的DOM事件,另一种自定义事件。原生DOM事件可以让用户与网页进行交互,比如:click(点击事件),change(当输入框发生变化时触发事件)。自定义事件可以实现子组件给父组件传递参数。(vue2中的@click绑定的事自定义事件,可以通过.native修饰符变为原生DOM事件。vue3绑定的是原生事件,利于defineEmits方法返回函数触发自定义事件,无需引入,直接使用)
子组件:
<template>
<div>
<button @click="butclick">子组件</button>
</div>
</template>
<script setup lang="ts">
//defineEmits写一个命名
const $emit=defineEmits(['comds'])
const butclick=()=>{
//给父组件传递命名和内容(22222)
$emit('comds','22222')
}
</script>
<style scoped>
</style>
父组件:
<template>
<div>
<Child :money="money" @comds="comchild" ></Child>
{{ son }}
</div>
</template>
<script setup lang="ts">
import Child from './AboutView.vue'
import {ref} from 'vue'
const money=ref(1111)
let son=ref('')
const comchild=(value:any)=>{
son.value=value
}
</script>
<style scoped>
</style>