Prop父子组件传值

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop":

<body>
    <div id="app">
        <haha name="老大" message="hello!"></haha>
        
    </div>
</body>
<script>
   Vue.component('haha',{
        props: ['message','name'],
         template:'<div>{{message}}123{{name}}</div>'
   })
    var vm = new Vue({
        el:"#app",
      
    })
</script>
body>
    <div id="app">
        <haha message="hello!"></haha>
        
    </div>
</body>
<script>
   Vue.component('haha',{
        props: ['message'],
       template:'<div>123{{message}}</div>'
   })
    var vm = new Vue({
        el:"#app",
    
    })
</script>
<think>好的,用户想了解在UniApp中使用Vue3进行父子组件的方法和示例。根据提供的引用内容,我需要整理出父子和子父的具体步骤,并给出代码示例。 首先,父组件子组件,通常是通过props实现的。在Vue3的setup语法中,子组件需要使用defineProps来接收父组件传递数据。引用[1]中的父组件示例里,子组件newsbox绑定了:itemInfo="item",所以子组件需要声明itemInfo这个prop。 然后,子组件父组件,一般通过自定义事件。引用[2]提到子组件用defineEmits定义事件,比如"changeData",然后在需要的时候触发这个事件,并传递数据父组件则通过@changeData来监听这个事件,并处理数据。 接下来需要考虑用户可能的疑问,比如如何确保props是响应式的。在Vue3中,使用ref或reactive创建的响应式数据,作为prop传递时,子组件会自动接收响应式数据,无需额外处理。但要注意如果传递的是基本类型,子组件不能直接修改,需要emit事件让父组件修改。 另外,用户可能想知道多个层级的组件如何,或者是否有其他方法,比如provide/inject。但根据问题,用户只关注父子组件,所以暂时不需要展开这部分内容。 需要检查示例代码是否符合UniApp的环境,比如模板中的标签是否是view而不是div,这点在引用[1]中已经正确使用view,所以示例中的代码应该没问题。 还需要注意Vue3的语法,比如script setup的使用,以及如何导入defineProps和defineEmits。在setup语法糖中,这些宏是自动可用的,无需显式导入。 最后,整理步骤和代码示例,确保语法正确,并分点说明,让用户容易理解。同时,生成相关问题时要围绕父子可能延伸的问题,如验证props、事件参数类型等。</think>### Vue3 + UniApp 父子组件方法详解 #### 一、父组件子组件Props) 1. **父组件模板**:通过 `:属性名="数据"` 传递响应式数据 ```html <!-- 父组件模板 --> <template> <view> <child-component :message="parentMessage"></child-component> </view> </template> <script setup> import { ref } from 'vue'; const parentMessage = ref('来自父组件的消息') // 创建响应式数据 </script> ``` 2. **子组件接收**:使用 `defineProps` 接收数据 ```html <!-- 子组件模板 --> <template> <view>{{ message }}</view> </template> <script setup> const props = defineProps({ message: { type: String, default: '' } }) </script> ``` *注意:传递对象类型数据时推荐使用 `reactive` 创建响应式对象[^1]* #### 二、子组件父组件自定义事件) 1. **子组件发送**:使用 `defineEmits` 定义事件 ```html <!-- 子组件模板 --> <button @click="sendData">发送数据</button> <script setup> const emit = defineEmits(['dataUpdate']) const sendData = () => { const newData = { value: '更新后的数据' } emit('dataUpdate', newData) // 触发自定义事件 } </script> ``` 2. **父组件接收**:通过 `@事件名` 监听 ```html <!-- 父组件模板 --> <child-component @dataUpdate="handleDataUpdate"></child-component> <script setup> const handleDataUpdate = (newData) => { console.log('收到子组件数据:', newData) // 更新父组件数据逻辑... } </script> ``` #### 三、双向绑定示例(v-model) 1. **父组件使用**: ```html <child-component v-model:title="pageTitle"></child-component> ``` 2. **子组件实现**: ```html <script setup> defineProps(['title']) const emit = defineEmits(['update:title']) const updateTitle = (newVal) => { emit('update:title', newVal) } </script> ``` **最佳实践建议**: 1. 复杂数据建议使用 `reactive` 包装对象 2. 事件命名推荐使用 `kebab-case`(如 `update-data`) 3. 跨层级组件建议使用 `provide/inject`(非父子场景)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值