从零开始的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关键字用来调用父级方法。

<!-- 子组件 -->
<template>
    <div>
        <button @click="$emit('parentFun')">按钮1</button>
        <!-- 或者写成 -->
        <button v-on:click="$emit('parentFun')">按钮2</button>
    </div>
</template>

<!-- 父组件 -->
<template>
    <div>
        <button @parentFun="parentMethod">父组件按钮1</button>
        <!-- 或者写成 -->
        <button v-on:parentFun="parentMethod">父组件按钮2</button>
    </div>
</template>
<script>
export default {
    methods:{
        parentMethod:function(){
            console.log("成功调用");
        }
    }
}
</script>

1.2方式二

<!-- 子组件 -->
<template>
    <div>
        <button @click="childFun">按钮1</button>
        <!-- 或者写成 -->
        <button v-on:click="childFun">按钮2</button>
    </div>
</template>
<script>
export default {
    methods:{
        childFun:function(){
            //parentFun为父级监听名，args为参数
            this.$emit('parentFun', args );
        }
    }
}
</script>

<!-- 父组件 -->
<template>
    <div>
        <button @parentFun="parentMethod">父组件按钮1</button>
        <!-- 或者写成 -->
        <button v-on:parentFun="parentMethod">父组件按钮2</button>
    </div>
</template>
<script>
export default {
    methods:{
        parentMethod:function(args){
            console.log("成功调用");
        }
    }
}
</script>

父组件调用子组件方法

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

//静态设置ref
<child ref="childVue"></child>
//父组件调用
this.ref.childVue.xxxxx()

//动态设置ref
<child v-for="item in param" :key="item.key" :ref="item.id"></child>

计算属性传参

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

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

//调用
returnColorType(type);

动态设置style

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

//直接从data中获取属性
<div :style = "{backgrounColor:param.color}"></div>

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

//通过计算属性返回css属性
<div :style="{backgroundColor:computed}"></div>

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

watch属性监听数组中的元素

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

v-for遍历

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

<div v-for="item in arr" :key="item.id"></div>

//或者遍历计算属性
<div v-for="item in retrunArr" :key="item.id"></div>
....
computed:{
	retrunArr(){
		//业务逻辑
		return arr;
	}
}

//多参循环 index为元素下标
<div v-for="( item , index ) in arr" :key="index">{{item.content}}</div>

v-for循环对象：

//单参数，item为每个元素
<div v-for="item in obj" :key="item.id"></div>

//双参数，item为value， key为每个值的key
<div v-for="( item , key ) in obj" :key="item.id"></div>

//三参数，item为value， key为每个值的key ，index为索引
<div v-for="( item , key , index ) in obj" :key="item.id"></div>