vue怎么在子组件中修改父组件传的参数？

最新推荐文章于 2024-09-17 08:12:07 发布

小丁冲鸭！

最新推荐文章于 2024-09-17 08:12:07 发布

阅读量1.7k

点赞数 2

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/DZY_12/article/details/117034986

版权

这篇博客介绍了三种在Vue中子组件如何修改父组件传递的参数的方法：通过$emit触发事件通知父组件修改、使用.sync修饰符（Vue3已弃用）以及利用v-model实现双向数据绑定。详细代码示例分别展示了这三种方法的实现过程。

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

实现效果：

父组件的一个按钮控制子组件显示，子组件内部有一个按钮，控制自己隐藏，效果如下：

法一：子组件中通过$emit一个事件告诉父组件要修改的值，然后在父组件里修改show的值，子组件的值就会自动更新了

父组件：

<template>
    <div>
        <input type="button" 
               value="我是父组件中的按钮" 
               @click="show">
        <child v-show="isShow"  @changeIsShow="hideChild" />
    </div>
</template>
<script>
  import child from "./child.vue"
  export default {
      data() {
          return {
              isShow:false
          }
      },
      components:{
          child
      },
      methods:{
          show(){
              this.isShow = true;
          },
          hideChild(da