vue 组件传值

1. 父组件传值给子组件
2. 父组件传值子组件实时改变
   3.子组件和父组件通讯
   直接看代码:

//父组件代码
<template>
    <div>
        <div v-if="!show1">
            父组件
            <button @click="show1 = !show1">点击显示子组件</button>
        </div>
        <!-- 子组件 -->
        <list v-if="show1"  v-on:myCancel="show1 = !show1" 
            :show="show1" :testData.sync="sonData"></list>
    </div>
</template>
<script>
import list from './list'
export default {
    components:{
        list
    },
    data(){
        return {
            sonData:{name:'子组件'},
            show1:false
        };
    },
    methods:{}
}
</script>
<style lang="less">
</style>

子组件代码
<template>
  <div class="orgContent-out" v-if="show">
    我是{{testData.name}}
    <button @click="cancel">关闭子组件，显示父组件</button>
  </div>
</template>
<script>
export default {
  name: "list",
  props: {
    testData: {
     type: Object,
      default(){
        return {}
      }
    },
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  methods: {
    cancel() {
      this.$emit("myCancel", "取消");
    }
  },
};
</script>
<style lang="less">
</style>

结果：

点击前
点击后
子组件关闭后

完成啦，喜欢就留个❤❤吧