vue 父子组件通信

最新推荐文章于 2023-03-16 10:04:52 发布

wendZzz

最新推荐文章于 2023-03-16 10:04:52 发布

阅读量200

点赞数

分类专栏： Vue 文章标签： vue父子组件通讯

Vue 专栏收录该内容

9 篇文章

订阅专栏

该博客主要介绍了Vue父子组件通讯的相关内容。包括父向子的数据传递，如使用特定方式传递数据及动态传递；还介绍了子向父的数据传递，如通过自定义事件和.sync修饰符，其中.sync修饰符可实现双向数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父 -> 子的数据传递

使用 `Props` 传递数据

父组件

<template>
  <div class="parent">
    <son :number="num"></son>
  </div>
</template>

<script>
import son from './children/son'

export default {
  name: 'parent',
  data () {
    return {
      num: 1
    }
  },
  components:{
    son
  }
}
</script>

子组件

<template>
  <div class="son">
    {{number}}
  </div>
</template>

<script>
export default {
  name: 'son',
  props:{
    number:Number
  }
}
</script>

子组件显示 0

动态 `Props`

修改父组件

<template>
  <div class="parent">
    <son :number="num"></son>
  </div>
</template>

<script>
import son from './children/son'

export default {
  name: 'parent',
  data () {
    return {
      num: 1
    }
  },
  mounted () {
    setTimeout(() => {
      this.num = 99;
    }, 3000);
  },
  components:{
    son
  }
}
</script>

子组件先显示 0, 3 秒后显示 99

子 -> 父的数据传递

自定义事件

父组件

<template>
  <div class="parent">
    <son :number="num" @reset="resetNum"></son>
  </div>
</template>

<script>
import son from './children/son'

export default {
  name: 'parent',
  data () {
    return {
      num: 0
    }
  },
  mounted () {
    setTimeout(() => {
      this.num = 99;
    }, 3000);
  },
  methods: {
    resetNum (data) {
      this.num = data;
    }
  },
  components:{
    son
  }
}
</script>

子组件

<template>
  <div class="son">
    {{number}}
    <button @click="reset">reset</button>
  </div>
</template>

<script>
export default {
  name: 'son',
  props:{
    number:Number
  },
  methods: {
    reset () {
      this.$emit('reset', 0)
    }
  }
}
</script>

此时, 子组件初始显示 0, 3 秒后显示 99, 点击 reset 重新显示 0

.sync 修饰符

实现双向数据绑定的语法糖

父组件

<template>
  <div class="parent">
    <son :number.sync="num"></son>
  </div>
</template>

<script>
import son from './children/son'

export default {
  name: 'parent',
  data () {
    return {
      num: 0
    }
  },
  mounted () {
    setTimeout(() => {
      this.num = 99;
    }, 3000);
  },
  components:{
    son
  }
}
</script>

子组件

<template>
  <div class="son">
    {{number}}
    <button @click="reset">reset</button>
  </div>
</template>

<script>
export default {
  name: 'son',
  props:{
    number:Number
  },
  methods: {
    reset () {
      this.$emit('update:number', 0)
    }
  }
}
</script>