组件之间数据传递

组件之间的数据传递

父组件向子组件传递值v-bind(单向数据传递)

使用v-bind定义一个属性传值,到子组件

<script setup>
import { ref, computed, defineProps, defineComponent } from 'vue'
import wind from './components/windCard.vue'
defineComponent({
    name: 'app',
})
let va=ref(0)
function add(){
   va.value++;
}
	


</script>

<template>
    <div class="div1">
        <el-text >  count:  {{ va }}</el-text>
        <el-button @click="add">+1</el-button>
        <hr/>
        <wind v-bind:number="va" ></wind>     //在这里,重点v-bind命令
    </div>
</template>

子组件通过宏定义``defineProps`创建一个json对象,显式声明接到的子组件信号

<script setup>
import { ref, computed, defineProps, defineComponent } from 'vue'
defineComponent({
    name: 'MyComponent',
})
let va = ref(0)
const emit=defineEmits(['inFocus', 'update:number'])


const props=defineProps({
    number: {
        type: Number,
        default: 0
    }
})

function add() {
 emit('update:number',props.number+1)
}
</script>

<template>
    <div>
        <el-text > count:{{ props.number}}</el-text> //重点:一定要通过这种方式来访问接收到属性值,json对象
        <el-button @click="add">+1</el-button>
    </div>
</template>

父组件与子组件值双向传递(``v-model`)

父组件v-model传递一个属性给子组件

<script setup>
import { ref, computed, defineProps, defineComponent } from 'vue'
import wind from './components/windCard.vue'
defineComponent({
    name: 'app',
})
let va=ref(0)
function add(){
   va.value++;
}

</script>

<template>
    <div class="div1">
        <el-text >  count:  {{ va }}</el-text>
        <el-button @click="add">+1</el-button>
        <hr/>
        <wind v-model:number="va" ></wind>
    </div>
</template>

重点:子组件 接受 父组件中的数据,并通过 (自定义事件,再触发) 返回子组件中 更新后的属性值 给父组件

1. 先定义:自定义事件,更新父组件中的自定义事件名字模板'update:属性名字'

   const emit=defineEmits(['inFocus', 'update:number']) //自定义事件

2. 函数中触发事件,emit(事件名称:string,新的属性值)

<script setup>
import { ref, computed, defineProps, defineComponent } from 'vue'
defineComponent({
    name: 'MyComponent',
})
let va = ref(0)
const emit=defineEmits(['inFocus', 'update:number']) //自定义事件


const props=defineProps({
    number: {
        type: Number,
        default: 0
    }
})

function add() {
 emit('update:number',props.number+1)  //函数中触发自定义事件
}
</script>

注意点:子组件中不可以直接操作 来自父组件中 传递的属性,一定不可以

<template>
    <div>
        <el-text > count:{{ props.number}}</el-text> //json对象的访问
        <el-button @click="add">+1</el-button> 
    </div>
</template>

注意事项

- 组合式api中需要在子组件中 显式指定 组件接收到来自父组件的值(是一个json对象))

- 子组件中不能 直接更改 父组件中传递的属性

- 更新父组件传递的属性,采用的触发自定义格式相同

emit('update:number',props.number+1): emit(‘update:名字’,新的属性值)

miit实现兄弟组件传递数值

综上所述，无论是多个子组件还是单个组件中，都可以使用 mitt 库来实现组件之间的通信。如果在多个子组件之间传递数据，则需要在它们的父组件中创建一个单一的事件总线对象。

数据总线一定要相同,才能监听同一个事件

导出一份mitt实例

import mitt from 'mitt'
const bus = mitt()
export default bus

全局导入[main.js中]

import mitt from 'mitt'
 const bus = mitt()
 app.config.globalProperties.$EventBus = bus

在组件中导入

兄弟组件A监听事件

<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import bus from '../bus'



// 监听事件
let receivedMessage=ref('')
bus.on('jisho', (message) => {
  receivedMessage.value = message
})
</script>

兄弟组件B中触发事件

<template>
  <el-input v-model="input">
  </el-input>
  <el-button @click="fa">send</el-button>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import  bus  from '../bus';

let input=ref('fasdfas')
function fa(){

    //触发事件
    bus.emit('jisho', input.value)
}
</script>