vue父子组件之间的通信

一、把父组件里的值传给子组件

1.父组件通过v-bind:绑定传输的值

2.子组件用props接收

1.父组件里的代码如下

<template>
  <div class="parent_component">
    <p>父组件里的时间{{starttime}}</p>
    <childcomponent  class="child"  :transParent='starttime'></childcomponent>
  </div>
</template>

<script>
  import child_component from '@/components/parent_child_components/child_component.vue'
  export default {
    name: "parent_component",
    data() {
      return {
        starttime: '2019-08-08',
      };
    },

    components: {
      childcomponent: child_component
    },

    created() {

    },
    mounted() {},
    methods: {
     
    },
    computed: {}
  };

</script>

<style scoped>
  .parent {
    background: #ccc;
    height: 100px;
  }

  .child {
    background: pink;
    height: 130px;
  }

</style>

2.子组件里的代码

<template>
  <div class="child_component">  
    <p>接收父组件的值{{transParent}}</p>
  </div>
</template>

<script>
  export default {
    name: "child_component",
    data() {
      return {
      
      };
    },
    props: ['transParent'],
    created() {      
    },

    mounted() {    
    },

    methods: {

    },
  };

</script>

<style scoped>


</style>

 

 

 

二、子组件的值传给父组件

1.子组件通过$emit绑定事件

2.父组件通过v-on监听

 

子组件代码如下

<template>
  <div class="child_component">
    <p>子组件的值</p>
    <p>{{value}}</p>
  </div>
</template>

<script>
  export default {
    name: "child_component",
    data() {
      return {
        value:'初始化'
      };
    },
  
    created() {
      this.$emit('transChild', this.value);
    },

    mounted() {
     
    },

    methods: {
    },
  };

</script>

<style scoped>


</style>

父组件代码如下:

<template>
  <div class="parent_component">
        <p>接收子组件里的值</p>
        <p>{{getchild}}</p>
   <childcomponent  v-on:transChild="gettime" ></childcomponent>
  </div>
</template>

<script>
  import child_component from '@/components/parent_child_components/child_component.vue'
  export default {
    name: "parent_component",
    data() {
      return {
        getchild:'',
      };
    },

    components: {
      childcomponent: child_component
    },

    created() {

    },
    mounted() {},
    methods: {
      //得到子组件传过来的值
      gettime(val) {
        this.getchild = val;
        console.log(this.getchild)
      },
    
    },
    computed: {}
  };

</script>

<style scoped>
  .parent {
    background: #ccc;
    height: 100px;
  }

  .child {
    background: pink;
    height: 130px;
  }

</style>

 

三、父子组件里的方法互相调用

1.父组件里给子组件加上ref属性,通过this.$refs.组件名.方法来调用

2.子组件里通过this.$parent.方法来调用

//父组件调子组件里的方法
this.$refs.chil1.trans(1);



//子组件调父组件里的方法
this.$parent.change();

 

四、完整的代码

父组件

<template>
  <div class="parent_component">
    <div class="parent">
      <div>
        <p>父组件里的时间{{starttime}}</p>
        <button @click="change()">改变父组件里的时间</button>
        <button @click="changechild()">调用子组件里的方法</button>
      </div>
      <br>  
      <div>
        <p>接收子组件里的值</p>
        <p>{{getchild}}</p>
      </div>
    </div>

    <childcomponent ref="chil1" class="child" v-on:transChild="gettime" :transParent='starttime'></childcomponent>

  
  </div>
</template>

<script>
  import child_component from '@/components/parent_child_components/child_component.vue'
  export default {
    name: "parent_component",
    data() {
      return {
        starttime: '2019-08-08',
        getchild:'',
      };
    },

    components: {
      childcomponent: child_component
    },

    created() {

    },
    mounted() {},
    methods: {
      //得到子组件传过来的值
      gettime(val) {
        this.getchild = val;
        console.log(this.getchild)
      },
      //改变父组件里的值
      change() {
        this.starttime = '2019-11-11';
      },

      //从父组件改变子组件的值
      changechild(){
        this.$refs.chil1.trans(1);
      }
    },
    computed: {}
  };

</script>

<style scoped>
  .parent {
    background: #ccc;
    height: 100px;
  }

  .child {
    background: pink;
    height: 130px;
  }

</style>

 

子组件

<template>
  <div class="child_component">
    <p>子组件的值</p>
    <p>{{value}}</p>
    <button @click="trans('改变后')">改变子组件的值</button>
    <button @click="changeparent()">调用父组件里的方法</button>

    <br> <br> 

    <p>接收父组件的值{{transParent}}</p>

    <!--<p>直接通过后台传递绑定的数拿值-----从父组件里的拿到的值{{transParent}}</p> -->
    <!-- <p>通过计算属性拿值-------从父组件里的拿到的值{{parentValue}}</p>
    <p>通过监听属性拿值-------从父组件里的拿到的值{{$parent.starttime}}</p> -->
  </div>
</template>

<script>
  export default {
    name: "child_component",
    data() {
      return {
        value:'初始化',
        getparent:'',
      };
    },
    props: ['transParent'],

    //以下有两种方法监听父组件里传来的值
    computed: {
      parentValue() {
        console.log('计算属性里拿到的值'+this.transParent)
        return this.transParent;
        // return this.$parent.starttime;
      }
    },

    watch: {
      //监听父组件里的值得变化
      transParent: {
        handler: (val, oldval) => {
          console.log('监听里拿到的值' + val)
        },
        immediate: true, //关键
        deep: true
      },
    },

    created() {
      this.$emit('transChild', this.value);
    },

    mounted() {
      //如果我在这里把父组件里的值赋值给一个值  父组件里操作的时候getparent的值不会改变  
      this.getparent=this.transParent
    },

    methods: {

      trans(val) {
        this.value=val;
        this.$emit('transChild', this.value);
        //通过赋值拿到的值
        console.log(this.getparent);   //----------没有变化还是2019-08-08
        console.log(this.parentValue); //实时变化的

        //直接通过方法拿到的值
        console.log(this.transParent);        //实时变化的
        console.log(this.$parent.starttime)   //实时变化的
      },

      //调用父组件里的方法
      changeparent() {
        this.$parent.change();

        console.log(this.$parent.starttime)   //实时变化的
      }
    },
  };

</script>

<style scoped>


</style>