vue中父子组件的通信ref

Vue中父子组件之间可以通过ref进行通信。具体地，可以在父组件中通过ref属性给子组件添加一个引用标识，然后在父组件中通过$refs来访问子组件的属性和方法。例如：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  mounted() {
    const childComponent = this.$refs.child
    childComponent.doSomething()
  }
}
</script>

在上面的例子中，父组件通过ref属性给子组件添加了一个标识child，然后在mounted钩子函数中通过this.$refs.child访问子组件，并调用了子组件的doSomething方法。这样就实现了父组件向子组件传递数据或调用方法的功能。

相关问题

vue3父子组件通信有哪些方式

在 Vue3 中，父子组件之间通信有以下几种方式：

1. Props/emit：和 Vue2 中一样，通过 props 将父组件的数据传递给子组件，然后通过 emit 将子组件的事件传递给父组件。

2. provide/inject：父组件通过 provide 提供数据，然后子组件通过 inject 注入数据。

3. $attrs/$listeners：通过 $attrs 和 $listeners 将父组件的属性和事件传递给子组件。

4. ref：使用 ref 可以在父组件中访问子组件的实例，从而调用子组件的方法或访问子组件的数据。

5. Teleport：通过 Teleport 可以将子组件的内容插入到父组件的指定位置，从而实现父子组件之间的通信。

需要注意的是，尽量不要在子组件中直接修改父组件传递的 props 数据，而是应该通过 emit 触发事件，让父组件去修改数据。这样可以避免组件之间数据的混乱和不可预期的后果。

做一个简单的vue3父子组件通信

在Vue3中，父子组件间的通信通常通过props（属性传递）和自定义事件（$emit/$on）来实现。以下是简单的例子：

**父组件（Parent.vue）:**

<template>
  <div>
    <child-component :message="parentMessage" @newMessage="handleNewMessage"></child-component>
    <button @click="changeMessage">点击发送新消息</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('Hello, Parent!');
function changeMessage() {
  parentMessage.value = '新的消息';
}
function handleNewMessage(newMessage) {
  console.log('收到子组件的消息:', newMessage);
}
</script>

**子组件（ChildComponent.vue）:**

<template>
  <div @input="updateParentMessage">
    <input type="text" v-model="localMessage" placeholder="请输入消息">
    <button @click="$emit('newMessage', localMessage)">发送</button>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

function updateParentMessage(e) {
  this.$emit('newMessage', e.target.value); // 当输入框内容变化时，触发自定义事件并传递数据
}

onMounted(() => {
  // 父组件已经设置了一个初始值，可以在这里显示出来
  console.log('父组件传来的消息:', parentMessage.value);
});
</script>

在这个例子中，父组件通过`props`将变量`parentMessage`传递给子组件，并通过`@newMessage`监听子组件发出的`newMessage`事件。当用户在子组件输入框里输入并点击“发送”按钮时，会更新`parentMessage`并在父组件的日志中打印出新消息。