vue父组件修改子组件属性值和子组件修改父组件属性值

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

一、父组件修改子组件属性值

1.使用props将父组件的值传给子组件

props是通过父组件值传给子组件，子组件使用props来获取父组件传的值

• 父组件

<template>
    <div>
    <button @click="showFooter" ref="btn">显示footer</button>
    <footer :is_show="show"></footer>
</div>
</template>

<script>
import footer from '../main/footer';

export default {
     components: {
        footer
  },
      data(){
        return{
           show：fales
         }
      },
    methods:{
        showFooter(){
            this.show=true
        },
    }
}
</script>

• 子组件

<template>
    <div>
      <div v-show="isshow"></div>
      <p v-mode="sum"></p>
      <p @click="hiddenFooter()" >隐藏footer</p>
    </div>
</template>
<script>

export default {
     props: {
          //接收父组件传来的值
          isshow: String  //左边是接收的键名，右边的是接受的数据类型
    },
    methods:{
         hiddenFooter(){
            this.isshow=false
         },
     }
 },
</script>

` 说明：props只支持第一次加载这个组件的时候获取父组件的值，后续修改父组件的值得时候子组件并不会动态的更改。`

2. 通过$ref的方式调用子组件的方法改变子组件的值

父组件可以通过 $refs来管理通过ref注册过的所有子组件

• 子组件

<template>
  <div>
    <span>{{data}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
        //data为父组件传过来的数据
        data:'' 
    };
  },
  methods: {
    getData(val) {
        this.data=val;
    },
  },
};
</script>

• 父组件

<template>
  <div>
    <child ref='child'></child>
  </div>
</template>

<script>
export default {
    mounted(){
        setTimeout(()=>{
            this.$refs.child.getData("aaa"); //传给子组件的数据
        },3000)
    }
    components:{
        child:()=>import("../components/child.vue")
    }
};
</script>

3. 通过vue通过watch监听父组件传过来的值，来改变子组件的值

• 子组件

<script>
export default {
    props:{
        data:{
            type:Array
        }
    },
    data(){
        return{
            list:[]
        }
    },
    mounted() {
        //data为父组件传过来的数据
        this.list = this.data
    },
    watch:{
        data:{
            immediate: true, 
            handler(val) {
                this.list = val;
            }
        }
    }
    
}
</script>

• 父组件

<template>
    <div>
        <!-- 一定要v-if,否则子组件已经渲染了，却没有数据 -->
        <app-main v-if="dataList.length>0" :data="dataList"></app-main>
    </div>
</template>

<script>
import { AppMain } from '@/components/AppMain';
export default {
  name: "user",
  components: {
    AppMain
  },
  data(){
      return{
          dataList: []
      }
  }
};
</script> 

二、子组件修改父组件属性值

1.子组件调用$emit方法触发父组件事件

子组件接收父组件传的属性title，并可以点击修改title的值

• 父组件

<template>
    <!-- 传属性title和changeTitle方法给子组件 -->
    <div>
        <blog :title="title" @changeTitle="changeTitle"></blog>
    </div>
</template>

<script>
export default {
    data(){
          return{
              title: ""
          }
      }
     methods: {
        changeTitle(value) {
          this.title = value;
        }
    }
}
</script>

• 子组件

<template>
    <!-- 子组件调用$emit方法来修改title的值 -->
    <div @click="$emit('changeTitle','new title')">
      {{title}}
    </div>
</template>

<script>
export default {
    props: {
      // 子组件接收父组件传的属性title
      title: String
    }
}
</script>

2.使用.sync配合$emit方法以update的模式触发父组件事件

子组件接收父组件传的属性title，点击修改title的值

• 父组件

<template>
    // 父组件 传属性title给子组件，使用.sync修饰符
    <div>
        <blog :title.sync="title"></blog>
    </div>
</template>

• 子组件

<template>
    <!--  子组件调用$emit方法以update的模式触发事件来修改title的值 -->
    <div @click="$emit('update:title','new title')">
      {{title}}
    </div>
</template>

<script>
export default {
    // 子组件接收父组件传的属性title
    props: {
      title: String
    }
}
</script>