Vue中的组件，其实和我们js中的函数是一个逻辑，只是更加抽象化了
可以把组件理解成函数，如果想更贴近一些，理解成类（有属性和方法，还能构造出实例）
组件相当于类，构造出的实例，相当于类实例，面向对象的封装思维！
//父子关系的组件类似于这种结构！
//...function... 这里是全局作用域，相当于new Vue()组件
//有一点很重要：在组件中，不能跨作用域访问参数，必须一级一级往下传递,有发送者，也必须有接受者！
function parent() {
//这里的作用域是parent的;
function son() {
//这里的作用域是son的;
}
}组件之间传递参数分为两种方式，一种是在html标签方式传递！ 针对对父子组件！另外一种是，直接用vm.$on函数在js内部传递！
第一种：父子组件传递方法！
template 代码如下：
<head>
<link rel="stylesheet" href="./src/css/bootstrap.css">
<link rel="stylesheet" href="./src/css/app.css">
<!-- 模板代码务必单独提出来，不能放在.container中，否则会报错，因为此作用域中的变量，在.container中没有！ -->
<template id="parent">
<div>
<p><span>这是一个父组件{{parent_value}} </span></p>
<!--
父子组件传递参数的注意事项：
A、my-son是parent的子组件,必须放在内部才会显示！
B、在parent组件的内部调用son组件标签，必须在在my-son标签中传递参数【v-bind:son_value】;
C、必须在在my-son标签中返回数据【@son_data】,千万别放在其他标签上了，否则无效！
-->
<my-son v-bind:son_value="parent_value" @son_data="click_parent(event)" ></my-son>
<hr >
</div>
</template>
<template id="son">
<ol>
<li>这是一个子组件{{son_value}}</li>
<p><button @click='click_son(event)'>son按钮触发</button></p>
</ol>
</template>
</head>
<body>
<!--这里的container内部不能嵌入template(有局部作用域变量的),否则会报错！！-->
<div class="container" >
<my-parent v-bind:parent_value="g_data" @parent_data ="show(event)"></my-parent>
</div>
</body>js代码如下：
const app = new Vue({
el:".container",
data:{
g_data:"new Vue对象的作用域！"
},
methods: {
},
components:{
"my-parent":{
template: "#parent",
//在自定义组件中，data必须是函数,最终返回一个对象（官方有说明）
data:function(){
return {
parent_data:"这是一个局部父组件模板",
}
},
props:["parent_value"],
methods:{
click_parent:function(...args) {
console.log(args);
console.log("接受成功");
},
},
components:{
"my-son":{
template:"#son",
data:function() {
return {
son_name:"发射成功",
}
},
props:["son_value"],
methods: {
click_son:function(event) {
console.log("son的按钮已经点击成功,等待接受数据.....");
//this.$emit发射函数事件名称"son_data"不能有大写字母，否则发射会失败！
//详情查看：https://blog.csdn.net/weixin_43343144/article/details/86229116
this.$emit("son_data",[this.son_value,this.son_name]);
},
}
}
}
},
}
});