Vue 父子组件之间的相互传值——props

最新推荐文章于 2025-07-10 17:55:35 发布

csdn_undefined

最新推荐文章于 2025-07-10 17:55:35 发布

阅读量710

点赞数

CC 4.0 BY-SA版权

文章标签： vue 组件传参 props

本文链接：https://blog.youkuaiyun.com/weixin_43835652/article/details/84822526

本文详细介绍了在Vue.js中如何实现父组件向子组件及子组件向父组件的数据传递。包括使用props进行父到子的数据传递，以及通过事件($emit)实现子组件向父组件的数据反馈。

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

父组件向子组建传值使用props

父组件引用模板

import search from '../common/search.vue'
components:{
    search
  },

在模板引用时为模板绑定属性

<search number='8888'></search> //可绑定固定值

<search :number='number'></search>   //也可绑定动态属性

在子组件中只用做一件事，就是接收


 export default{
    props:["number"], //使用props接收参数。
    data(){
        return {
           
        }
    },

子组件接收参数后，直接使用this.number便可拿到该值。同时，我们还可以定义子组件接收参数的类型。


 export default{
    props:{
      number:{
         type:Number,
         required:true    
       } 
    }, //使用props接收参数。prop验证，注意要定义接收值的类型。
    data(){
        return {
           
        }
    },

需要注意：不要直接在子组件内操作父组件的内容，基于vue的单项数据流,子组件是不允许直接对父组件传来的值进行修改的,所以我们应该避免这种直接修改父组件传来值的操作。其实只需要这样修改就好了。

 export default{
    props:["number"], //使用props接收参数。
    data(){
        return {
           num:this.number  //将接收参数赋值
        }
    },

子组件向父组件传值。

在子组件内绑定一个事件，在事件内来触发响应的$emit使父组件可以知道有事件改变,进而接收对应的参数。

opensearch(){
     this.$emit("changename","传递的内容")        
},

在父组件中接收

    <search :changename='update' ></search>

update(data){
     console.log(data) //传递的参数
}

大家可以参考参考，我初学者，菜鸟一个,可能会有些出入。