Vue中父子组件传值

2023-08-25 121

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量

父子组件之间的传值

父传子

先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量

<template>
  <div>
      <child :⾃定义属性名="⽗组件的变量"></child>
  </div>
<template >

在⼦组件的props属性中可以取出⽗组件给的值，props中的变量⽤法和data中变量⽤法完全⼀样，只不过值的来源不同

<template>
    <div>
        <h1>{{⾃定义属性名}}</h1>
    </div>
</template>
<script>
export default {
    props:["⾃定义属性名"]
}
</script>
<style scoped>
</style>

案例:

父组件的写法：

<template>
  <div>
    <Zi :list="list" ></Zi>
  </div>
</template>
<script>
import Zi from "@/components/zi.vue";
export default {
  components: {
    Zi,
  },
  data() {
    return {
      list: "这是父组件中的内容",
    };
  },
};
</script>
<style>
</style>

子组件的写法：

<template>
    <div>
        <h1>{{list}}</h1>
    </div>
</template>
<script>
export default {
    props:["list"]
}
</script>
<style scoped>
</style>

效果为:

子传父

先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的函数

<template class="father">  
  <child  @⾃定义事件="⽗的处理函数">
<template >
export default {
 data() {}
 methods:{
⽗的处理函数(参数){
            //参数：得到⼦组件触发事件($emit)时，传递过来的数据
        }
    }
})

在⼦组件中 this.$emit(“⽗的处理函数”,this.数据) 触发⽗组件中的函数进⾏传参

<template>
    <div>
        <button @click="show">传到父组件</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list:"这是子组件中的数据"
        }
    },
    methods: {
        show(){
            this.$emit("⾃定义事件","传递的参数")
        }
    },
}
</script>
<style scoped>
</style>

案例:

父组件的写法:

<template>
  <div>
    <Zi @show="show" ></Zi>
  </div>
</template>
<script>
import Zi from "@/components/zi.vue";
export default {
  components: {
    Zi,
  },
  methods: {
    #a就为传递过来的参数
    show(a){
      alert(a)
    }
  },
};
</script>
<style>
</style>

子组件的写法:

<template>
    <div>
        <button @click="show">传到父组件</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list:"这是子组件中的数据"
        }
    },
    methods: {
        show(){
            this.$emit("show",this.list)
        }
    },
}
</script>
<style scoped>
</style>

效果为:

这是点击按钮之后弹出的效果

子传父的组件的自定义事件:

使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

触发自定义事件：this.$emit('atguigu',数据)
解绑自定义事件this.$off('atguigu')

注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

在父组件中写方法

<template>
  <div>
    <Zi ref="zi" ></Zi>
  </div>
</template>
<script>
import Zi from "@/components/zi.vue";
export default {
  components: {
    Zi,
  },
  methods: {
    #a就为传递过来的参数
    show(a){
      alert(a)
    }
  },
  #在生命周期中写回调函数
  mounted(){
   this.$refs.xxx.$on('⾃定义事件',"传递的方法名")
}
};
</script>
<style>
</style>

在⼦组件中 this.$emit(“⽗的处理函数”,this.数据) 触发⽗组件中的函数进⾏传参

<template>
    <div>
        <button @click="show">传到父组件</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list:"这是子组件中的数据"
        }
    },
    methods: {
        show(){
            this.$emit("⾃定义事件","传递的参数")
        }
    },
}
</script>
<style scoped>
</style>

案例：

父组件的写法:

<template>
  <div>
    <Zi ref="zi"></Zi>
  </div>
</template>
<script>
import Zi from "@/components/zi.vue";
export default {
  components: {
    Zi,
  },
  methods: {
    show(a){
      alert(a)
    }
  },
  mounted(){
    this.$refs.zi.$on("show",this.show)
  }
};
</script>
<style>
</style>

子组件的写法：

<template>
    <div>
        <button @click="show">传到父组件</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list:"这是子组件中的数据"
        }
    },
    methods: {
        show(){
            this.$emit("show",this.list)
        }
    },
}
</script>
<style scoped>
</style>