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>