父子组件之间的传值
父传子
先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量
<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>
效果为:
这是点击按钮之后弹出的效果
