vue组件传参

╰半夏微凉° 2022-12-24 05:50 218阅读 0赞

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

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

--------------------

### 文章目录 ###

*  父传子/子传父/兄弟组件传参/其他组件传参
 *  一、父传子
 *   *  父组件操作子组件
 *  二、子传父
 *   *  子组件操作父组件
 *  三、兄弟组件传参
 *  四、其他组件传参
 *  总结
 *   *  1.0父传子
     *  2.0子传父
     *  3.0兄弟组件
     *  4.0其他组件

--------------------

# 一、父传子 #

//通过绑定一个属性获取父亲传过来的内容
         //:绑定的属性:父亲传过来的内容
         //父组件
          <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元素上使用，引用信息是元素，如果在子组件上，引用信息就是组件实例

简单理解：

1.  如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。
2.  如果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
    
    <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', '子要传给父的值')//相当于直接操作父属性，不用在父添加事件
        }
    }

# 三、兄弟组件传参 #

兄弟组件的传值主要依靠 子->父->子 这样来传值

# 四、其他组件传参 #

如果更深层次的传值,解决方法通过vue提供的状态管理vuex来解决  
[vuex学习][vuex]

# 总结 #

## 1.0父传子 ##

:abc = “值” props:\[‘abc’\]或者对象模式获取  
父操作子 ref(放在子组件中是整个组件实例,挡在父组件中是当前dom元素)

## 2.0子传父 ##

通过this.$emit(‘e-child’,发射的值) 父组件通过 @e-child=“acceptSon” 这样把传的值放到acceptSon中  
子操作父(第一种来回发射;第二种通过sync直接操作)

## 3.0兄弟组件 ##

兄弟组件的传值主要依靠 子->父->子 这样来传值

## 4.0其他组件 ##