vue2 父子传参 ref 是怎么调用的 代码展示

在 Vue2 中，可以通过 `ref` 来获取子组件的实例，从而进行父子组件之间的通信。

以下是一个简单的例子：

<template>
  <div>
    <child ref="myChild" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    callChildMethod() {
      this.$refs.myChild.childMethod()
    }
  }
}
</script>

在父组件中使用 `ref` 获取子组件的实例，然后就可以通过获取到的子组件实例调用子组件的方法。在上面的例子中，点击按钮后会调用子组件的 `childMethod` 方法。

需要注意的是，通过 `ref` 获取到的子组件实例只有在子组件被渲染后才能获取到。如果需要在父组件中获取子组件的数据，可以通过 `props` 或 `$emit` 进行父子组件之间的数据传递。

相关问题

vue2 父子传参 ref 是怎么调用的

在 Vue2 中，可以通过 ref 来获取子组件实例，然后调用子组件的方法或访问子组件的属性。

首先，在父组件中给子组件添加 ref 属性：

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

然后在父组件中通过 this.$refs.child 来获取子组件实例：

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    // 获取子组件实例
    const child = this.$refs.child
    // 调用子组件方法
    child.methodName()
    // 访问子组件属性
    console.log(child.propertyName)
  }
}
</script>

注意：在父组件中获取子组件实例，需要在子组件渲染完成后才能获取到，因此需要在父组件的 mounted 钩子函数中获取。同时，需要确保子组件已经定义了 methodName 和 propertyName 方法和属性。

vue2 父子传参 ref 怎么从父组件传递到子组件 代码展示 完整代码演示

假设我们有一个父组件 `Parent.vue` 和一个子组件 `Child.vue`，我们可以通过在父组件中给子组件设置 `ref` 属性来获取子组件实例，并通过调用子组件的方法或设置其属性来传递参数。

下面是一个简单的示例：

Parent.vue：

<template>
  <div>
    <Child ref="child"></Child>
    <button @click="handleClick">传递参数到子组件</button>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  methods: {
    handleClick() {
      const child = this.$refs.child; // 获取子组件实例
      child.setMessage('Hello, Child!'); // 调用子组件的方法传递参数
    }
  }
}
</script>

Child.vue：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    setMessage(message) {
      this.message = message; // 设置子组件的属性
    }
  }
}
</script>

在这个示例中，我们在父组件中给子组件设置了 `ref="child"`，然后在父组件的 `handleClick` 方法中通过 `this.$refs.child` 获取子组件实例，并调用其 `setMessage` 方法传递参数。在子组件中，我们定义了一个 `message` 属性和 `setMessage` 方法，当父组件调用 `setMessage` 方法时，子组件的 `message` 属性会被更新，最终在子组件的模板中展示出来。

完整代码演示可以参考下面的 CodePen：

https://codepen.io/linxin/pen/ExZjJvG