vue中父组件如何动态修改子组件的值？

1.使用ref修改$refs:在Vue中，父组件可以通过 $refs来管理通过ref注册过的所有子组件，即 $refs对象下可以包含很多 $ref对象.创建两个组件分别是父组件：aaa.vue子组件：bbb.vue父组件操作（aaa.vue）在子组件上添加ref=“child”命名。给按钮添加一个方法，方法内使用 this.$refs.child.dlshow=true直接修改子组件的data数据

凌晨冲锋者

32547人浏览 · 2021-08-11 22:37:28

凌晨冲锋者 · 2021-08-11 22:37:28 发布

1.使用ref修改

$refs:
在Vue中，父组件可以通过 $refs来管理通过ref注册过的所有子组件，即 $refs对象下可以包含很多 $ref对象.

创建两个组件分别是父组件：aaa.vue 子组件：bbb.vue

父组件操作（aaa.vue）

在子组件上添加ref=“child”命名。
给按钮添加一个方法，
方法内使用 this.$refs.child.dlshow=true直接修改子组件的data数据中的dlshow内容。
方法内使用this.$refs.child.dlff(1)给子组件的dlff方法传递参数1

/*父组件*/
<template>
    <div id="da">
    
    <button class="zhu_dl" @click="parentButtonClick" ref="btn">登录一下吧</button>
    <denglu ref="child" > </denglu>

   </div>
      
</template>

<script>

// JS代码


import denglu from '../temo/denglu';

export default {
     components: {
        denglu
  },
      data(){
        return{

         }
      },
    methods:{
        parentButtonClick(){
            this.$refs.child.dlshow=true //修改子组件data
            this.$refs.child.dlff('正确传送') //修改传递子组件函数dlff()参数
        },
        
    }

}
</script>

子组件操作（bbb.vue）

<template>
    <div>
      <div id="dl_ye"   v-show="dlshow"></div>
      <p v-mode="sum"></p>
      <p class="text3" @click="panent()" >返回</p>
    </div>
</template>
<script>
import axios from "axios"; 
export default {
    data(){
        return{
            dlshow:"",
            sum:"
        },

 methods:{
    panent(){
            this.dlshow=false
         },
     //父组件使用了本函数穿过来的参数
    deff(a){
         this.sum=a
         }

     }

    },
</script>

2.使用props传递父传子

props是通过父组件值扔给给子组件，子组件使用props来接住值！

父组件操作（aaa.vue）

给子组件使用v-bind传过来的键名和它的值:shuju=“dlshow”
在data中定义对应的dlshow

/*父组件*/
<template>
    <div id="da">
    
    <button class="zhu_dl" @click="parentButtonClick" ref="btn">登录一下吧</button>
   <denglu  :nr="dlshow"></denglu>

   </div>
      
</template>

<script>

// JS代码


import denglu from '../temo/denglu';

export default {
     components: {
        denglu
  },
      data(){
        return{
           dlshow：fales
         }
      },
    methods:{
        parentButtonClick(){
            this.dlshow=true
        },
        
    }

}
</script>

子组件操作（bbb.vue）

使用props接收父组件扔过来的key键和参数类型。

<template>
    <div>
      <div id="dl_ye"   v-show="nr"></div>
      <p v-mode="sum"></p>
      <p class="text3" @click="panent()" >返回</p>
    </div>
</template>
<script>
import axios from "axios"; 
export default {
 props: {
      //接收父组件传来的值
      nr: String  //左边是接收的键名，右边的是接受的数据类型
    },
  

 methods:{
    panent(){
            this.nr=false
         },


     }

    },
</script>