一、通过对象字面量的形式，定义一个组件模板对象
首先创建组件，同时为这个组件起一个名称，并且利用标签形式，在页面中直接引入这个组件，同时还要在父组件中声明定义。
//这个是vue模板
<div id="app">
<com1></com1>
</div>
//这个是组件模板
<template id="tmp1">
<div> //指定的唯一的根容器
<h1>这是子组件</h1>
</div>
</template>
注意：通过一个指定的id "tmp1"来表示要去加载这个指定id的tmplate元素中的内容，用来当做组件的html结构。
<script>
var com1 = {
template: '#tmp1', //子组件的名称
}
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app', //vue的名称
data: {},
methods: { },
components: { //通过私有创建的方式在父组件中声明
com1
}
});
</script>
结果：
定义子组件
二、父组件向子组件传值
注意：子组件默认无法访问到父组件中的data的数据和methods中的方法
解决：父组件可以在引用子组件的时候，通过属性绑定的形式（v-bind），把需要传递给子组件的数据，以属性绑定的形式传递到子组件内部，供子组件使用。
1.先在父组件中定义要传输的值
我们在此时设置了一个msg
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的值',
},
methods: { },
components: {
com1
}
});
2.在父组件中绑定
注意1：把父组件传递过来的msg属性，现在props数组中定义一下，才能使用。
在此我们定义为parentmsg
var com1 = {
template: '#tmp1',
props: ['parentmsg'],//只读
}
<div id="app">
<com1 v-bind:parentmsg="msg"></com1>
</div>
注意2：组件中props所有的数据都是由父组件传递给子组件的
结果：
传递父组件的值
三、子组件通过事件调用向父组件传值
1.先在子组件中定义数据
var com1 = {
template: '#tmp1',
props: ['parentmsg'],
data(){
return{
msg: '我是子组件里的值'
}
},
}
2.在子组件中绑定方法
<template id="tmp1">
<div>
<h1>这是子元素------{{parentmsg}}</h1>
<input value="向父组件中传递消息" type="button" @click="sendMsg">
</div>
</template>
3.在子组件中定义方法，通过emit
var com1 = {
template: '#tmp1',
props: ['parentmsg'],
data(){
return{
msg: '我是子组件里的值'
}
},
methods: {
sendMsg(){
this.$emit('func', this.msg)
}
}
}
4.在父组件中定义方法
<div id="app">
<com1 v-bind:parentmsg="msg" @func="msgFormson"></com1>
</div>
5.在父组件的实例中编写方法
在此定义了一个变量用来接收子组件中的值
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的值',
msgformson: ''
},
methods: {
msgFormson(data) {
this.msgformson = data
console.log(this.msgformson)
}
},
components: {
com1
}
});
结果：
最终结果
当点击button后，会将子组件里的值传递过来，按照父组件的方法输出到控制台里。
