🍂引言

Vue.js 是一款流行的前端框架，它提供了组件化的开发方式，让我们可以更加模块化地组织代码。其中，父子组件是 Vue 组件化的核心概念之一。本文将详细介绍 Vue 父子组件的概念、属性传递、事件触发等内容，并通过代码示例进行演示。

🍂什么是父子组件

在 Vue 中，组件是可以重复使用的 Vue 实例，拥有一个名为 options 的对象，用于定义组件的属性、方法、生命周期等。而父子组件，则是一种层级关系，其中一个组件（父组件）内部使用了另一个组件（子组件）。

🍂属性传递

🍁父组件向子组件传递属性

父组件可以通过 props 属性向子组件传递数据。在子组件中，可以使用 props 选项来声明接收的属性。

🌿父组件代码示例

<template>  <div>  <h2>{{ title }}</h2>  <child-component :message="parentMessage"></child-component>  </div>  
</template>  <script>  
import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent,  },  data() {  return {  title: '父组件',  parentMessage: '来自父组件的问候',  };  },  
};  
</script>

🌿子组件代码示例

<template>  <div>  <p>{{ message }}</p>  </div>  
</template>  <script>  
export default {  props: {  message: {  type: String,  required: true,  },  },  
};  
</script>

🍁子组件向父组件传递属性

子组件可以通过 $emit 方法触发自定义事件，并向父组件传递数据。父组件可以通过监听该事件来接收子组件传递的数据。

🌿子组件代码示例

<template>  <div>  <button @click="sendDataToParent">向父组件发送数据</button>  </div>  
</template>  <script>  
export default {  methods: {  sendDataToParent() {  const childData = '来自子组件的数据';  this.$emit('childEvent', childData);  },  },  
};  
</script>

🌿父组件代码示例

在父组件中，可以通过 @childEvent 来监听子组件触发的自定义事件，并在事件处理函数中接收子组件传递的数据。例如：

<child-component @childEvent="handleChildEvent">
</child-component>。

其中，handleChildEvent 是父组件中定义的事件处理函数。函数代码如下：

methods: {
handleChildEvent(childData) {
console.log(childData);
}
} 复制代码```

🍁插槽（Slots）传递内容

除了属性传递外，Vue还提供了插槽（Slots）机制，用于在父组件中向子组件传递内容。

🌿子组件代码示例

<template><div><slot></slot></div>	
</template>
<script>export default {};</script>

🌿父组件代码示例

在父组件中，可以在子组件标签内部编写要传递的内容。例如：

<template><div><h2>{{ title }}</h2><child-component><p>这是要传递给子组件的内容。</p>						</child-component></div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {components: {ChildComponent,},data() {return {title: '父组件',};},
};
</script>	

🍂总结

通过本文的介绍和代码示例，我们了解了Vue父子组件的概念、属性传递和事件触发等内容。父子组件是Vue.js中实现组件化的核心方式之一，通过合理地使用父子组件，我们可以更加模块化地组织代码，提高代码的可维护性和复用性。同时，我们也介绍了如何使用插槽机制在父组件中向子组件传递内容，这是一种灵活的方式来实现父子组件之间的内容传递。

---

🏫博客主页：魔王-T

🥝大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️