vue传值

一、vue传值

1.组件传值

• 父传子

父组件

<template>
  <div class="home">
    <!-- :kk，:ff传入子组件的值 -->
    <HelloWorld :ff="data" :kk="datas" />
  </div>
</template>

<!-- 在script里定义传入的数据 -->
  data() {
    return {
      // 定义传入的值
      datas: {
        Status: "数组传值",
        InstanceId: "pppppppp",
      },
      data: "单个数据传值",
    };
  }

子组件

//调用接收的数据
<template>
  <div class="hello">
    <h1>数组数据{{ kk.Status }}</h1>
    <h1>单个数据{{ff}}</h1>
  </div>
</template>

export default{
//接收传入的值
  props: {
 //数组类数据 
      kk:{
        type:Object,
      },
 //单个数据
      "ff":String
  },
};

---

• 子传父

父组件

<template>
  <div class="home">
    <!-- son子组件中定义的事件名，getSon触发事件 -->
    <HelloWorld @son="getSon" />
    <h1>{{son}}</h1>
  </div>
</template>

<!-- 在script里定义接收的数据 -->
 data() {
    return {
      // 定义数据
      son:""
    };
  },
 methods:{
 	//e是子组件传入的值
     getSon(e){
      //  获取子组件传入的值，并赋值给son
       this.son=e;
     }
  } 

子组件

<template>
  <div class="hello">
  <!-- 触发son事件 -->
    <button @click="son">传值</button>   
  </div>
</template>

//在script里定义传值事件
methods:{
    son(){
      //this.$emit('事件名','传入的数据')
      this.$emit('son','子传父的值')
    }
  },
  mounted(){
    this.son()
  }
  
// vue3使用setup语法糖使用emit写法
<script setup>
	import { defineEmits } from 'vue'
	const emit = defineEmits(["alertSome"])
	//方法
	function son(res){
	  emit('showLogin', res)
	}
</script>

---

• 兄弟传参

main文件里实例化vue 最后暴露这个实例

//直接添加到main里，bus实例名
Vue.prototype.$bus = new Vue()

兄弟组件1（传播者）

<template>
  <div class="hello">
    <!-- 触发son事件 -->
    <h1>兄弟组件1</h1>
    <button @click="brother">兄弟传值</button>  
  </div>
</template>

//定义事件传值
 methods:{
    brother(){
    //this.$bus.$emit('方法名称','数据')
      this.$bus.$emit('brotherll','兄弟传参的值')
    }
  }

兄弟组件2（接收者）

<template>
    <div>
        <h1>兄弟组件2</h1>
        <!-- 显示接收的值 -->
        <span>{{this.brother}}</span>
    </div>
</template>
<script>
export default{
    data(){
        return{
            brother:''
        }
    },
    //兄弟组件创建后接收值，created生命周期
    created(){
    //this.$bus.$on('方法名称','数据')
        this.$bus.$on("brotherll",this.getBrother)
    },
    methods:{
    //调用生命周期里的this.getBrother()方法
       getBrother(e){
           this.brother=e;
       }
    }
}
</script>

---

• 父组件获取子组件数据和方法（$refs）

父组件

<template>
  <div class="home">
  <!-- 引入组件，并在组件里定义方法用来存放获取子组件的数据ref = "header" -->
    <HelloWorld ref="header" />
    <button @click="getChildProp()">获取子组件的属性的值</button>
    <h1>{{this.mge}}</h1>
    <button @click="getChildMethod()">获取子组件的方法</button>
  </div>
</template>

//对子组件里的数据和方法进行操作
data() {
    return {
      mge: "",
    };
  },
  methods: {
    getChildProp() {
    //header是定义存放数据的方法，msg是子组件里的数据名
    //this.$refs.父组件定义的方法名.子组件的数据名
      this.mge = this.$refs.header.msg;
    },
    getChildMethod() {
    //this.$refs.父组件定义的方法名.子组件的方法名
      this.$refs.header.run();
    },
  },

子组件

//子组件里的数据和方法
data() {
    return {
      msg: "我是子组件header的值哟",
    };
  },
  methods: {
    run() {
      alert("这是子组件Header的方法+" + this.msg);
    },
  },

---

• 子组件获取父组件数据和方法（$parent）

父组件

<template>
  <div class="home">
    <HelloWorld />
  </div>
</template>

//定义数据和方法
data() {
    return {
      fatherMsg:"负责了"
    };
  },
  methods: {
    fatherRun() {
      alert("这是子组件Header的方法+" + this.msg);
    },
  },

子组件

//直接在子组件中使用this.$parent.XX，不需要做任何多余操作。
methods: {
    getFatherProp() {
    //获取父组件的fatherMsg数据
      alert(this.$parent.fatherMsg);
    },
    getFatherMethod() {
    //获取父组件的fatherRun()方法
      this.$parent.fatherRun();
    },
  },

---

2.路由传值

方式一：通过query方式传参

• 这种情况下query传递的参数会显示在url后面
• 定义方法传参:

//没有name
this.$router.push({
　　path:'/detail',
　　query:{id:id}
　　})

• 对应路由配置：

{
　　path:'/detail',
　　name:'Detail',
　　component:Detail
}

• 子组件获取参数

　　this.$route.query.id

方式二：通过params方式传参

• 定义方法传参:

//没有path
this.$router.push({
　　name:'Detail',
　　params:{id:id}
　})

• 路由配置

{
　　path:'/detail',
　　name:'Detail',
　　component:Detail
}

• 获取参数

this.$route.params.id

方式三:直接在路由地址后面拼接参数

　this.$router.push({
　　path:`/detail/${id}`
　　})

• 路由配置

{
　　path:'/detail/:id',
　　name:'Detail',
　　component:Detail
}

• 获取参数

this.$route.params.id