父子组件之间的关系可以简介为props down，event up
他们之间的数据流向是单向的，父组件要传递数据给子组件是通过属性，子组件要传递数据给父组件是通过事件触发。
props从父亲传递数据到子组件。
我们首先定义一个box的局部components子组件hello，组件里面的对象我可以提取出来在外面书写这个obj1
var vm = new Vue({
el: '#box',
data:{
mytest:"1111111S"
},
components:{
hello:obj1
}
})
var obj1={
template:`我是hello组件
`
}
然后在父组件就调用这个组件
这样是没有问题的，那么现在我要进行传值调用,因为我不一定子组件hello就只能显示‘我是hello组件这句话而已吧’，那么我hello组件可以加上一个mytext这样的属性，我就想传 mytext="lalalla" age="30000"这样一个值可以不？
是可以的，相应的父组件中也要加上
var obj1={
template:`我是hello组件{{mytext}},{{age}}
`,
props:["mytext","age"],
}
相当于在父组件中声明了这两个属性，说可以放在props这里，然后就可以通过插值表达式的方法放上子组件上了。当然 props也能做数据验证，那就不能以数组方式书写了，要以对象的方式去书写
var obj1={
template:`我是hello组件{{mytext}},{{age}}
`,
props:{
mytext:String,
age:Number
}
}
那如果age就想只要字符串怎么办？
要用v-bind转化一下，相应的v-bind也可以简写成 :age="3000",因为v-bind:age=" "里面加的是表达式，如果没有则是数字，如果v-bind:age="'30000'"它就是字符串了。
那我要想从子组件传给父组件呢？
那我们就得利用事件了，在父组件中监听事件emit(eventName)，在子组件触发事件的同时把值给传出去，那么父组件中监听的那个事件就会相应的得到这个值。
之前我们已经创建好hello这个相对于box来说的子组件了把，那我们再创一个相对于hello的子组件button，在button绑定一个点击事件handleclick
并且在hello组件的对象里定义点击事件的方法，东西是出来了，那么我们要怎么传给button父组件hello呢？
这就要在hello添加一个v-on监听事件了
只要子组件中触发handleclick事件，那么父组件中就能监听到xiaoming并触发父组件的handelParentclick，当然handelParentclick要在父组件中定义好。
相当于我在调用子组件时父组件已经做好监听准备了，这个监听器名字叫做xiaoming，子组件接下来要做的事情就是分发事件,要把事件分发给具体那个监听器
var obj1={
template:`我是hello组件{{mytext}},{{age}}
`,
props:{
mytext:String,
age:Number
},
methods:{
handleclick(){
// console.log('我是hello的子组件')
this.$emit("xiaoming")
}
}
}
此时再点击摁扭就发现
总的来说就是子组件如果摁下了摁扭，就触发了摁扭的handleclick事件，这个事件又分发事件给父组件的监听器，父组件又触发了监听器的事件。
当然了，子组件分发事件的时候也可以传值
methods:{
handleclick(){
// console.log('我是hello的子组件')
this.$emit("xiaoming","来自子组件的问候~~")
}
}
监听器会默认把值传过来，监听器那头不用改，依旧还是
父组件这边会接受一个data值，可以把这个值打印出来
var vm = new Vue({
el: '#box',
data:{
mytest:"1111111S"
},
components:{
hello:obj1
},
methods: {
handelParentclick(data){
console.log('parent被调用啦',data);
}
}
})
其实还有一个父组件属性简写，直接全部写v-model
在父组件hello里面，我们定义了mytest这个值,并且用一个p标签显示出来
我是父组件中的{{mytest}}
这个mytest同时还要在父组件的data里面定义好
var vm = new Vue({
el: '#box',
data:{
mytest:"1111111S"
},
components:{
hello:obj1
},
methods: {
}
})
因为
var obj1={
template:`
`,
//次props为注册的写法，还有对象的形式是验证的方法
props:["value"],//可转化成v-on:value="mytest"
methods:{
}
}
此时父组件的 mytest:"1111111S"中的值就可以传到input上了，
那子组件要想输入数据时候传到父组件上呢？，就要在子组件中绑定事件了
var obj1={
template:`
`,
//次props为注册的写法，还有对象的形式是验证的方法
// props:["mytoken","mytoken2","age"]
props:["value"],
methods:{
handelInput(ev){
this.$emit("input",ev.target.value)
}
}
}
所以子组件中的值改变了，马上就能传到父组件上。