vue组件传参

最新推荐文章于 2024-02-08 10:28:07 发布

故心v

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量144

点赞数 1

分类专栏： vue 文章标签： vue.js 组件传参

本文链接：https://blog.csdn.net/qq_41555854/article/details/110209827

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue中组件间通信的四种方式：父传子、子传父、兄弟组件传参及使用Vuex进行状态管理。通过props实现数据传递，使用$emit和@事件监听实现双向通信，并探讨了在复杂场景下如何利用Vuex解决组件间的深层通信问题。

摘要由CSDN通过智能技术生成

父传子/子传父/兄弟组件传参/其他组件传参

故心故心故心故心小故冲啊

一、父传子

     //通过绑定一个属性获取父亲传过来的内容
     //:绑定的属性:父亲传过来的内容
     //父组件
      <Btn  :obj="obj" /> -->
      <Btn  :obj="obj2" :action="action"/>
      <Btn  :obj="obj2" :action="abc"/>
    //子组件获取
    export default {
   data(){
    return{
      title:'我是按钮',
    }
  },
  //props:[] //也可以通过数组的方式获取
  props:{
    obj:{
      title: {
        type: String,
        default: '按钮'
      },
      color: String,
      padding: String
    },
    action:Function
  },

父组件操作子组件

ref被用来给DOM元素或子组件注册引用信息，引用信息会根据父组件的$refs对象进行注册。

如果在普通DOM元素上使用，引用信息是元素，如果在子组件上，引用信息就是组件实例

简单理解：

如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。
如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似

index.vue
<!-- 父操作子-->
<Btn :obj = "obj"  ref='btn'/>
<button @click="change()">改变</button>

data(){
    return{
      obj:{title:'查看详情',color:'green',padding:'10px'}
    }
}
methods:{
    change(){  
      //操作子组件的属性和方法
      console.log(this.$refs.btn.sub);
      console.log(this.$refs.btn.action());
    }
}


Btn.vue
<button :style="{color:obj.color}">{{obj.title}}</button>
接收父的参数：
1、对象的方式
 props: { 
    obj:{   
      title: String,
      color: String,
      padding: String
    }
 }
2、数组的方式
props:['obj']
data(){
    return{
      sub:'我是子组件按钮',
    }
},
methods:{
    action(){
       console.log('我是子组件按钮')
    }
}

二、子传父

//子传父通过发射
//子组件内容
 <button :style="{color:obj.color}" @click="send()">{{obj.title}}</button>
 //子组件点击按钮触发send()方法
  send(){
       //this.$emit('e-child','子要传给父的值')    //发射一个事件 把子的值传给父 
       this.$emit('e-child',this.event)     //子操作父的方法  把父的方法传入到子中处理
    },
  //send方法通过this.$emit 发射一个事件 把子的值传给父 
//父组件内容
 <Btn  :event="action" @e-child="acceptSon"/>
 //父组件通过 @e-child="acceptSon" 这样把传的值放到acceptSon中
  acceptSon(value){  
      //value就是子组件传过来的值
      //  console.log(value);
      //  this.name = value;
      //value是子传入的，如果是函数，调用value()
      value()

子组件操作父组件

方法一：

index.vue
<!-- @e-child 监听并接收参数-->
<Btn :obj = "obj" :event="action" @e-child="acceptSon"/>

data(){
    return{
      obj:{title:'查看详情',color:'green',padding:'10px'}
    }
}
methods:{
	action(){  //父组件的方法
      this.name = '父组件的值';
    },
    acceptSon(res){  //
		//res()就是action函数
		res()
    }
}


Btn.vue
<button :style="{color:obj.color}" @click="send()">{{obj.title}}</button>
接收父的参数：
1、对象的方式
 props: { 
    obj:{   
      title: String,
      color: String,
      padding: String
    },
    event:Function
 }
2、数组的方式
props:['obj','event']

methods:{
    send(){
       this.$emit('e-child',this.event)     //子操作父的方法  把父的方法传入到子中处理
    }
}

方法二：

index.vue
<!-- 直接通过sync修饰符修改父的title,然后页面监听title变化 ->
<Btn :obj = "obj" :parentTitle.sync="title" />
{{title}}

data(){
    return{
      title:'parent',
      obj:{title:'查看详情',color:'green',padding:'10px'}
    }
}



Btn.vue
<button :style="{color:obj.color}" @click="send()">{{obj.title}}</button>
接收父的参数：
1、对象的方式
 props: { 
    obj:{   
      title: String,
      color: String,
      padding: String
    }
 }
2、数组的方式
props:['obj']

methods:{
    send(){
       this.$emit('update:parentTitle', '子要传给父的值')//相当于直接操作父属性，不用在父添加事件
    }
}