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>