父子组件之间的传值方式

父子组件之间的传值方式

一、父组件传值给子组件

首先在components文件夹下创建一个子组件文件：rcheckbox.vue。

<template>
  <div id="vue_det">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
  </div>
</template>
<script type="text/javascript">
  export default {
    name: 'vue_det',
    props:{checkedNames:Array},  //props是接受父组件传值方式
    data () {
      return {
        checkedNames:[]
      }
    },
    methods:{
      goback:function(){
        this.$router.go(-1);
      }
    },
    watch:{   //用watch监听值变化
      checkedNames:function(){
        this.$emit("ackeck",this.checkedNames)   //$emint将值传递给一个父组件的自定义方法中
      }
    }
  }
</script>

然后创建父组件文件Home.vue

<template>
  <div id="vue_det">
    <h3 @click="goback">返回上一页</h3>
    <rcheckbox @ackeck="ackeck" :checkedNames="checkedNames"></rcheckbox>
    //ackeck 就是子组件用过$emint传值自定义方法
    //checkedNames 是服组件向子组件传递的参数
  </div>
</template>
<script type="text/javascript">
  import Rcheckbox from '@/components/rcheckbox'   //引入rcheckbox子组件
  export default {
    name: 'vue_det',
    components : { rcheckbox:Rcheckbox },  //通过components 定义
    data () {
      return {
        checkedNames:["Jack"]  //传给子组件的具体值
      }
    },
    methods:{
      goback:function(){
        this.$router.go(-1);
      },
      ackeck:function(e){
        console.log(e);  //输出子组件传递给父组件的值
      }
    }
  }
</script>