Vue 父子组件使用props 传递参数

本文详细介绍了在Vue中如何自定义子组件,并在父组件中通过特定语法将数据传递给子组件的方法。通过实例展示了如何使用冒号加子组件参数的形式进行数据绑定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

自定义了子组件,在父组件中引用了子组件,如果要在父组件中传递参数(数据)给子组件,如何操作呢?、

1. 自定义子组件

<template>
  <div class="container">
    <div class="top">
      <p class="p_left">{{titleLeft}}</p>
      <p class="p_right" @click="clickAction">{{titleRight}}</p>
    </div>
    <div class="line"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props:['titleLeft','titleRight'],
  data() {
    return {
    };
  },
  methods: {
      clickAction(){
        this.$emit('clickHeadAction',this.titleRight);
      }
  }
};
</script>

2.父组件中调用子组件

<div class="message">
      <ActivityHead :titleLeft="msgLeft" :titleRight="msgRight" @clickHeadAction="clickChild"></ActivityHead>

    </div>

说明:

 在父组件中最核心的部分是:[:titleLeft="msgLeft" :titleRight="msgRight"]  通过冒号+子组件参数的形式,将数据传递给子组件。

Vue.js 中父子组件间的参数传递有多种方式: 1. **props** (属性): 最常用的方式,父组件通过`props`向下传递数据给子组件。父组件通过标签属性传递值,并定义好相应的`props`类型和默认值。子组件通过`this.$ props`访问这些数据。 ```html <!-- 父组件 --> <template> <child-component :message="parentMessage"/> </template> <script> export default { data() { return { parentMessage: 'Hello from parent' }; } }; </script> ``` ```js // 子组件 ChildComponent.vue <template> <p>{{ message }}</p> </template> <script> import { Prop, Component } from 'vue'; @Component export default { props: { // 定义接收的 prop 名称、类型以及是否允许空值 message: { type: String, required: true }, }, }; </script> ``` 2. **事件(Event Emitters)**: 父组件通过触发自定义事件并监听这个事件,在子组件中处理事件携带的数据。 ```html <!-- 父组件 --> <template> <button @click="passData('fromParent')">Pass Data</button> <child-component @receiveData="handleReceivedData"></child-component> </template> <script> export default { methods: { passData(data) { this.$emit('receiveData', data); }, handleReceivedData(data) { console.log('Received:', data); } } }; </script> ``` 3. **Vuex** (状态管理库): 当数据需要在应用的多个部分共享时,可以考虑使用 Vuex。父子组件通过actions和mutations间接通信。 ```javascript // store.js 或者 vuex 中 export const actions = { sendData({ commit }, payload) { commit('SET_DATA', payload); } }; // 父组件 dispatch dispatch('sendData', 'parentData'); // mutations.js const mutations = { SET_DATA(state, data) { state.parentData = data; } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值