vue中子组件的拆分 父组件与子组件之间的传值

vue是组件式开发，尽量独立出子组件

prop()：父组件传值给子组件

$emit()：子组件传值给父组件

子组件中的设置： 使用bind

<template>

　　: default-checked = "check"

　　@checked="getCurrent"

</template>

<script>

export default {

name: ' camelName ',  //name命名采用驼峰式命名, 这里name定义虽然和后面引用的子组件名没有关系，但是尽量保持一 致

data () {

return {

　　......... // 定义参数

    },

  }

props: ['check'],

created (){

.......//  生命周期函数，使用this初始化函数

}，

method:{

   ......   

   function  getCurrent(param){

    .......

　　this.$emit('getCurrent', result)  // $emit()将得到的结果result传入父组件中绑定了getCurrent的函数current中

   }

 

 }

},

</script>

<style scoped>   // scoped的作用是以下的设置只在当前区域生效

　......

</style>

父组件中引用子组件：

<template>

　　<camel-name  @getCurrent="current" :check="form.check"></camel-name>  // 标签使用组件要用短横线

</template>

<script>

import camelNamefrom '../../../../components/file_name' 

export default {

name: ' camelName1',  //name命名采用驼峰式命名

components: {camelName，....},   //定义子组件

data () {

return {

　　.........//定义参数

   form{

      check:[],

   }

    },

  }

created (){

.......//  生命周期函数，使用this初始化函数

}，

method:{

   .....

　getCurrent (result) {

　　this.form.check= result   //将从子组件传过来的结果赋给父组件中的变量用

　},

 }

},

</script>

<style scoped>   // scoped的作用是以下的设置只在当前页面生效

　......

</style>