目录
vue2
父传子 props
//父组件
<template>
<son :father="father"></son>
</template>
<script>
import son from './son.vue'
export default {
data() {
return {
father: '我是父组件传过去的值',
}
},
components: {
son,
},
}
</script>
//子组件
<template>
<h2>{
{ father }}</h2>
</template>
<script>
export default {
props: {
father: String,
default: '',
},
}
</script>子传父 $emit
//父组件
<template>
<son @toFather="getSon"></son>
{
{ father }}
</template>
<script>
import son from './son.vue'
export default {
data() {
return {
father: '',
}
},
components: {
son,
},
methods: {
getSon(value) {
this.father = value
},
},
}
</script>
//子组件
<template>
<button @click="btn">传值</button>
</template>
<script>
export default {
data() {
return {
son: '我是子组件传过去的值',
}
},
methods: {
btn() {
this.$emit('toFather', this.son)
},
},
}
</script>兄弟传值 $bus
//组件A
<template>
<h2>我是兄弟组件A</h2>
<button @click="btn">传值</button>
</template>
<script>
export default {
data() {
return {
brother: '我是子组件传过去的值',
}
},
methods: {
btn() {
this.$bus.$emit('toBrother', brother)
},
},
}
</script>
//组件B
<template>
<h2>我是兄弟组件B======>{
{ data }}</h2>
</template>
<script>
export default {
data() {
return {
data: '',
}
},
methods: {
getBrother(value) {
this.data = value
},
},
created() {
this.$bus.$on('toBrother', this.getBrother)
},
}
</script>vue3
父传子 defineprops
//父组件
<template>
<h1>我是父亲组件</h1>
<son :father="father"></son>
</template>
<script setup>
import son from './son.vue'
import { ref } from 'vue'
const father = ref('我是父组件传的值')
</script>
//子组件
<template>
<h2>我是儿子组件====>{
{ father }}</h2>
</template>
<script setup>
import { defineProps } from 'vue'
defineProps({
father: {
type: String,
default: '',
},
})
</script>
子传父 defineEmits
//父组件
<template>
<h1>我是父亲组件====>{
{ data }}</h1>
<son @toFather="getSon"></son>
</template>
<script setup>
import son from './son.vue'
import { ref } from 'vue'
// const father = ref('我是父组件传的值')
const data = ref('')
const getSon = (value) => {
data.value = value
}
</script>
//子组件
<template>
<h2>我是儿子组件</h2>
<button @click="toFather">点击传值</button>
</template>
<script setup>
import { defineEmits, ref } from 'vue'
const son = ref('儿子组件传的值')
const emit = defineEmits(['toFather'])
const toFather = () => {
emit('toFather', son)
}
</script>兄弟传值
1.首先下个包
npm i mitt -S
2.创建一个工具文件
import mitt from 'mitt';
const emitter=mitt();
export default emitter;
//组件A
<template>
<h2>我是兄弟组件A</h2>
<button @click="btn">点击传值</button>
</template>
<script setup>
import { ref } from '@vue/reactivity'
import emitter from './utils/Bus.js'
const str = ref('这是组件A的值')
const btn = () => {
emitter.emit('fn', str)
}
</script>
//组件B
<template>
<h2>我是兄弟组件B=====>{
{ data }}</h2>
</template>
<script setup>
import { onBeforeMount, ref } from 'vue'
import emitter from './utils/Bus.js'
const data = ref('')
onBeforeMount(() => {
emitter.on('fn', (e) => {
data.value = e.value
})
})
</script>后代传值
//父亲组件
<template>
<h1>我是父亲组件</h1>
<son></son>
</template>
<script setup>
import son from './son.vue'
import { provide, ref } from 'vue'
const data = ref('这是父组件传给孙子的值')
provide('data', data)
</script>
//孙子组件
<template>
<h2>我是孙子组件=====>{
{ data }}</h2>
</template>
<script setup>
import { inject } from 'vue'
const data = inject('data')
</script>