Vue父子组件传参

在Vue中，通过组件化开发可以将页面划分成多个可重用的组件。在组件之间进行数据传递是非常常见的操作，本文将介绍Vue父子组件传参的几种方式。

父组件向子组件传参

props

在父组件中使用props属性来向子组件传递数据。具体操作如下：

html复制代码
<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent component'
    }
  }
}
</script>

在上述代码中，我们定义了一个名为parentMessage的数据，并将其作为message属性的值传递给子组件。注意：:message与v-bind:message等价，即将message属性绑定到父组件的parentMessage数据。

html复制代码
<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在子组件中，我们使用props属性来声明接收父组件传递过来的message属性。然后在模板中使用插值语法({{ }})来显示message的值。

$emit

在子组件中使用自定义事件来向父组件传递数据。具体操作如下：

html复制代码
<!-- 父组件 -->
<template>
  <div>
    <child-component @update:message="updateParentMessage"></child-component>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent component'
    }
  },
  methods: {
    updateParentMessage(message) {
      this.parentMessage = message;
    }
  }
}
</script>

在上述代码中，我们使用@update:message来监听子组件自定义事件，并在updateParentMessage方法中修改父组件的parentMessage数据。

html复制代码
<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('update:message', 'Hello from child component');
    }
  }
}
</script>

在子组件中，我们使用$emit方法触发自定义事件，并将数据作为参数传递给父组件。

子组件向父组件传参

$refs

在父组件中使用ref属性来获取子组件实例对象，然后通过该实例对象访问其数据或方法。具体操作如下：

html复制代码
<!-- 父组件 -->
<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="getChildMessage">Get Child Message</button>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    getChildMessage() {
      const childMessage = this.$refs.child.message;
      console.log(`Child Message: ${childMessage}`);
    }
  }
}
</script>

在上述代码中，我们使用ref属性为子组件创建引用，并在getChildMessage方法中通过this.$refs.child获取子组件实例对象，并访问其message数据。

html复制代码
<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child component'
    }
  }
}
</script>

在子组件中，我们定义了一个名为message的数据，并在模板中使用插值语法({{ }})来显示该数据。

$parent 是Vue实例的一个属性，它指向当前实例的父实例。在组件中使用 $parent 属性可以访问到父组件中的数据和方法。

例如，如果要从子组件中访问父组件的 message 数据，可以这样写：

html复制代码
<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  data() {
    return {
      message: 'Hello world!'
    }
  },
  components: {
    'child-component': ChildComponent
  }
}
</script>

html复制代码
<!-- 子组件 -->
<template>
  <div>{{ $parent.message }}</div>
</template>

<script>
export default {
}
</script>

这里的 $parent 指向父组件实例，所以可以通过 $parent.message 来访问父组件的 message 数据。

需要注意的是，使用 $parent 可能会导致代码的可读性变差，特别是在嵌套较深的情况下。因此，建议使用Vuex或事件总线等方式来进行父子组件间的通信。