vue父子通讯

关键因素XFactor

已于 2023-08-16 15:37:54 修改

阅读量102

点赞数

分类专栏： Vue 文章标签：前端 vue.js

于 2023-05-17 18:39:54 首次发布

本文链接：https://blog.csdn.net/weixin_52923266/article/details/130724754

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章介绍了在Vue.js中父子组件之间进行交互的几种方式，包括子组件调用父组件的方法（$parent引用，$emit触发事件），父组件调用子组件的方法（使用ref），以及父子组件之间的数据传递（props和$emit）。这些机制使得组件间的通信更加灵活。

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

子组件调用父组件中的方法

我把子组件注册成了全局组件，所以在父页面中不用引入直接使用就可以了。

import son from '@/components/son'
Vue.component(son.name,son)

方法一，使用this.$parent.event

父组件

<template>
  <div>
    <son></son>
  </div>
</template>

<script>
export default {
    methods:{
        father() {
            console.log('我是父组件')
        }
    }
}
</script>

子组件

<template>
  <div>
    <button @click="son">点击</button>
  </div>
</template>

<script>
export default {
    name:'son',
    methods:{
        son() {
            this.$parent.father()
        }
    }
}
</script>

方法二，使用$emit

父组件

<template>
  <div>
    <son @father="father"></son>
  </div>
</template>

<script>
export default {
    methods:{
        father() {
            console.log('我是父组件')
        }
    }
}
</script>

子组件

<template>
  <div>
    <button @click="son">点击</button>
  </div>
</template>

<script>
export default {
    name:'son',
    methods:{
        son() {
            this.$emit('father')
        }
    }
}
</script>

方法三，使用props

父组件

<template>
  <div>
    <son :father="father"></son>
  </div>
</template>
<script>

export default {
    methods:{
        father() {
            console.log('我是父组件')
        }
    }
}
</script>

子组件

<template>
  <div>
    <button @click="son">点击</button>
  </div>
</template>

<script>
export default {
    name:'son',
    props: {
        father: {
          type: Function,
          default: null
        }
    },
    methods:{
        son() {
            if(this.father) {
              this.father()
            }
        }
    }
}
</script>

父组件调用子组件中的方法

使用ref

父组件

<template>
  <div>
    <son ref="child"></son>
    <button @click="father">点击</button>
  </div>
</template>

<script>
export default {
    methods:{
        father() {
            this.$refs.child.son()
        }
    }
}
</script>

子组件

<template>
  <div>
    
  </div>
</template>

<script>
export default {
    name:'son',
    methods:{
        son() {
           console.log('我是子组件')
        }
    }
}
</script>

子组件向父组件传值

使用$emit

父组件

<template>
  <div>
    <son @son="father"></son>
    <p>{{name}}</p>
  </div>
</template>

<script>
export default {
    data() {
      return {
        name:''
      }
    },
    methods: {
      father(data) {
        this.name = data
      }
    }
}
</script>

子组件

<template>
  <div>
    <button @click="son">按钮</button>
  </div>
</template>

<script>
export default {
    name:'son',
    data() {
      return {
        name:'我是子组件'
      }
    },
    methods: {
      son() {
        this.$emit("son",this.name)
      }
    }
}
</script>

父组件向子组件传值

使用props

父组件

<template>
  <div>
    <son :name="name"></son>
  </div>
</template>

<script>
export default {
    data() {
      return {
        name:'我是父组件'
      }
    }
}
</script>

子组件

<template>
  <div>
    {{name}}
  </div>
</template>

<script>
export default {
    name:'son',
    props: {
      name: String,
      required: true
    },
}
</script>