[vue] 父子组件间传值

最新推荐文章于 2024-08-02 09:29:40 发布

JoeBlackzqq

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量265

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/JoeBlackzqq/article/details/100172988

版权

本文介绍了在Vue 3.x环境中，如何实现父组件向子组件传递值并监听子组件的值变化。通过在父组件中使用属性绑定并添加.sync修饰符，子组件接收到初始值后，利用`this.$emit('update:xxx', newValue)`来更新父组件绑定的变量。同时强调子组件中不能使用v-model绑定属性，因为属性遵循单向数据流，而v-model需要双向数据流的变量。" 138193223,7337247,自动驾驶：未来交通革命,"['自动驾驶', '人工智能', '深度学习', '计算科学', '架构设计']

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

环境说明: vue 3.x + ant-vue

父组件(Album.vue)使用:

<template>
  <div>
				<a-button type="primary" icon="plus" @click="uploadImage">图片</a-button>
				<upload-image :visible.sync="visible"></upload-image>
  </div>
</template>

<script>

import UploadImage from './UploadImage'

export default {<template>
  <div>
    <a-button type="primary" icon="plus" @click="uploadImage">图片</a-button>
    <upload-image :visible.sync="visible"></upload-image>
  </div>
</template>

<script>
import UploadImage from "./UploadImage";

export default {
  name: "Album",
  components: { UploadImage },
  data: function() {
    return {
      visible: false
    };
  },
  methods: {
    uploadImage() {
      this.visible =