测开：vue组件化开发
vue官网地址：
Vue.js - 渐进式 JavaScript 框架 | Vue.js
上一章节：
测开：vue基本语法_做测试的喵酱的博客-CSDN博客
测开：vue高级特性_做测试的喵酱的博客-CSDN博客
一、全局组件
1.1 全局组件定义：
全局组件：使用Vue.component定义组件
Vue.component('left-con', {
template: `
这个是页面左边内容的组件
1、使用Vue.component()
2、括号中，'left-con' 为 组件的名称，自己根据需要命名
3、template: 后面跟的是组件的具体内容。template 是关键字
注意：
Vue.component() 一定要在 new Vue()的上面啊，不然就报错了。
1.2 全局组件使用：
在页面中使用组件 <组件名>
1.3 举例：
如下图一个页面布局。
页面代码：
我们定义三个全局组件，放到这三个布局中。
1.4 其他
1、全局组件，不仅可以在页面中使用，也可以在其他组件中使用全局组件。
使用方法和页面中，一样。
在页面中使用组件 <组件名>
如在右侧组件中，使用左侧组件。
Vue.component('page-right',{
template:`
页面右侧组件内容
2、全局组件命名
命名规范：组件命名尽量使用中划线命名风格 xxx-xxx，如my-name。
使用驼峰命名，在页面中引用组件的时候，可能会报错。
3、定义的全局组件 可以再其他的组件中直接引用
注意点：在组件的版本中引用其他组件可以使用大驼峰命名法
二、局部组件
1、应用范围：
局部组件只能在父组件(页面)中使用，不能在其他的组件中引用。
2、定义局部组件
在vue的实例中，创建components。
如：
var vue = new Vue({
el:"#app",
data:{},
components:{
'page-top': {
template: `
`
},
'page-bottom': {
template: `
张三
`
}
}
})注意：
组件名要使用引号包起来，不然会报语法错误-
定义template：
局部组件，template 中，有多个标签时，必须定义一个跟节点。
如：
'page-top': {
template: `
张三
张三
`
},template 中，有三个元素，但是没有一个标签作为跟节点，这样就只能把第一个元素识别为根节点 ，只展示第一个元素。
正确的写法，要加一个根节点：
3、举例
三、组件中的数据和方法定义
3.1 组件中的数据data
组件中的数据，要在对应组件中定义data。
组件里的data，是一个函数。需要的数据需要return出去。
格式：
components:{
"page-top":{
template:`
单价:{{price}}
数量:{{num}}
总价:{{total}}
`,
data:function(){
return{
price:18,
num:11,
}
}
},
整体代码：
3.2 组件中的方法methods
在组件中，定义methods方法。格式与在vue实例中，定义方法是一摸一样的。
模板：
methods:{
selefInt:function(){
var str = this.name + this.age
alert(str)
}
},
举例：
3.3 组件中的计算属性computed
样式：
计算属性computed 与 在vue中定义是一摸一样的。
computed:{
total: function() {
return this.price * this.num
}
}举例：
3.4 组件中的侦听器watch
watch:{
age:function(value){
console.log(value)
}
}
四、组件之间的数据传递
4.1 父组件调用子组件，向子组件中传递数据
1、举例
2、展示
3 、实现数据传递步骤
1、准备测试数据。
在vue的实例中，准备测试数据。
2、全局组件中，定义变量与页面样式。
1、定义视图所需要的变量。
props:['lists'],关键字为props
整个视图只需要一个变量（这个变量为一个数组）。
props 所有需要的变量为一个数组，在[]中，这个视图只需要一个变量，所以为
['lists']
2、全局组件的视图。（用到了变量）
3、在父级页面中，调用全局组件，并将参数传递给全局组件。
:lists 全局组件中，定义的变量名称。
"tableData"，数据源。
4.2 子组件向父组件传递数据
应用场景：
子组件的数据发生变化后，将这个数据传递给父组件。
举例：
这些数据展示样式，在子组件，
数据在父组件。
当点击执行的时候，将该条数据的信息弹出alert。
弹出alert的方法，为父组件的方法。 这条数据的信息，是子组件提供的。
实现步骤：
1、子组件通过$emit将数据传递给父组件
在子组件中通过$emit来触发一个自定义的事件，并把数据传递过去
模版：
$emit('自定义的事件名',传递的数据)举例：
点击按钮时，通过runcase事件，将item.id 发送给父组件。
emit 是关键字
'runcase',是发送事件的自定义命名。将来父组件接收信息时，也是通过这个事件名称来接收的。
自己随便命名，注意，千万不要用驼峰形式，转换的时候会报错，为了保险起见，我这里命令都用小写的字母。
2、父组件接收传参，并使用这个参数。
父组件在引用子组件时，通过事件监听机制，来监听子组件自定义的事件，并指定方法去处理这个事件
模板：
@自定义的事件名 = 处理事件的方法($event)
3、在处理事件的方法中接收数据，并处理