从零开始的VUE项目(三)：ELEMENT UI静态页面开发

• 父组件向子组件传值
• 子组件调用父组件方法
• 父组件调用子组件方法
• 计算属性传参
• 动态设置style
• watch属性监听数组中的元素
• v-for遍历

父组件向子组件传值

流程：父级组件在data中定义数据，或者通过方法获取数据 》在子组件调用位置通过v-bind:childParamName=“parentParamName” (或者简写成 :childParamName=“parentParamName”）》子组件中通过props:[“childParamName”]接收参数。
注意：父级传参时，参数名成不能相同。即上述流程中得childParamName不能与parentParamName相同
props两种接收参数方式：

props:["param"]
props:{
	param:{
		//传值类型
		type:String / Number /Objected, / [ String , Number ] //传值类型为字符串、数字、对象、多种传值可能（字符串、数字）
		//传值必要性
		required: true/false,
		//给予默认值
		default : xxxx,
		//或者
		default:function(){
			//业务逻辑
		},
		//校验函数
		validator:function(value){
			//业务逻辑
		}
	}
}

子组件调用父组件方法

1.1方式一
重点：子组件@click="$emit(“parentFun”)"、父组件调用处增加@parentFun=“parentMethod” ; $emit关键字用来调用父级方法。

1.2方式二

父组件调用子组件方法

父组件调用子组件的方法或者数据，需要通过 ref 关键字来关联。ref也可以通过变量来赋值，需要通过**:ref**来指定。

//静态设置ref

//父组件调用
this.ref.childVue.xxxxx()

//动态设置ref

计算属性传参

正常得计算属性函数是不能带参，通过闭包的形式传参。

computed:{
	//带参计算属性
	returnColorOfType(){
		return function(type){
			return "red"
		}
	}
}

//调用
returnColorType(type);

动态设置style

注意：style动态设值得，需要关键符号" : "，“:style”才会生效。并且具有“-”的属性需要改成驼峰型属性名（比如：background-color —> backgroundColor）。如果不是通过计算属性返回完整的style json字符串。则需要通过必须被包含在“{}”中。

//直接从data中获取属性


//通过计算属性返回整个style  格式{“backgroud”:"red"}


//通过计算属性返回css属性

图为通过计算属性返回完整的style样式

watch属性监听数组中的元素

watch虽然可以通过deep:true来深层次监听数组，但是对性能还是有影响的。但是可以通过多定义一个变量，然后将数组中的元素赋值给变量，通过监听该变量，变向监听数组中的元素。
代码示例

v-for遍历

v-for可以直接循环数组、object对象等。
需要注意的是：当数组或者对象中的值发生改变时，并不会触发v-for重新渲染数据。需要使用vue特定的api来给数组或者对象修改值才会触发。官方文档
v-for循环数组：

//或者遍历计算属性

....
computed:{
	retrunArr(){
		//业务逻辑
		return arr;
	}
}

//多参循环 index为元素下标
{{item.content}}

v-for循环对象：

//单参数，item为每个元素


//双参数，item为value， key为每个值的key


//三参数，item为value， key为每个值的key ，index为索引