组件上的v-model(数据传递)，props验证，自定义事件，计算属性

一.props验证

在封装组件时对外界传递过来的props数据进行合法性校验，从而防止数据不合法问题。

1.基础类型检查

String,Number,Boolean,Array,Object,Date,Function,Symbol

2.多个可能的类型

3.必须项校验

4.属性默认值

5.自定义验证函数

<template><div>父组件</div><DemoSon :msg="msg" :title="title" type="abc"></DemoSon>
</template>
<script>
import DemoSon from './son.vue'
export default {name:'demo',components:{DemoSon},data(){return{msg:'111',title:'abc'}}
}
</script><template><div>子组件</div><p>{{ msg }}{{ title }}</p>
</template>
<script>
export default {name:'demo-son',props:{msg:{type:[Number,String],required:true,default:10},title:String,type:{validator(value){// true成功，false失败return ['success','warning','danger'].indexOf(value)!==-1}}}
}
</script>

二.计算属性computed

计算属性本质上是一个function函数，可以监听data中数据的变化，并return一个计算后的值，供组件渲染dom时使用。

计算属性会缓存计算的结果，只有在计算属性的依赖项发生变化时，才会重新计算。

计算属性只能当作普通数据项使用，不能当作方法调用（不能使用括号调用）。

<template><div><input type="text" v-model.number="num"></div><div>{{ plus }}</div>
</template><script>export default {name:'demo',data(){return{num:111}},computed:{plus(){return  this.num*2}}}</script>

<template><div><table border><tr><td class="goodState">状态</td><td class="goodId">#</td><td class="goodName">名称</td><td class="goodPrice">单价</td><td class="goodNum">数量</td><td class="goodTime">价格</td><td class="goodAction">操作</td></tr><tr v-for="(item,index) in goods.data" :key="item.id"><td class="goodState"><input type="checkbox" v-model="item.state" :id="item.id"><label :for="item.id">{{item.state===true?"上架":"下架"}}</label></td><td class="goodId">{{index+1}}</td><td class="goodName">{{item.name}}</td><td class="goodNum">{{item.price}}</td><td class="goodNum">{{item.num}}</td><td class="goodTime">{{item.num*item.price}}</td><td class="goodAction"><b @click="addFn(item.id,item.num)">+</b><b @click="minusFn(item.id,item.num)">-</b></td></tr><tr><td>总数：{{ number }}</td><td>总计：{{ total }}</td></tr></table></div>
</template><script setup>
import { ref,reactive, computed } from "vue"
const goods=reactive({data:[{id:'1',name:'苹果',state:true,price:2,num:0,time:'2020-11-03 11:00:00'},{id:'2',name:'梨',state:true,price:2,num:0,time:'2020-11-03 11:00:00'},{id:'3',name:'香蕉',state:true,price:2,num:0,time:'2020-11-03 11:00:00'}]
})
const minusFn=(id,num)=>{if(num>0){for(let i=0;i<goods.data.length;i++){if(goods.data[i].id===id){goods.data[i].num= num-1}}
}
}
const addFn=(id,num)=>{for(let i=0;i<goods.data.length;i++){if(goods.data[i].id===id){goods.data[i].num= num+1}}
}
const number = computed(()=>{let n=0;goods.data.forEach((item)=>{if(item.state){n+=item.num}})return n;
})
const total = computed(()=>{let sum=0;goods.data.forEach((item)=>{if(item.state){sum+=item.num*item.price}})return sum;
})</script><style scoped lang="scss">td{width: 200px;height: 40px;}b{margin-right: 20px;}
</style>

三.自定义事件

1.声明自定义事件

2.触发自定义事件

3.监听自定义事件

<template><div class="card">{{ count }}<Son @changeCount="changeCount"></Son></div>
</template>
<script >
import Son from './son.vue'
export default{name:'index',components: {Son},data(){return{count:0}},methods:{changeCount(str){this.count = str}}
}
</script><template><button type="button" @click="clickFn">按钮</button>
</template>
<script>
export default{name:'son',emits:['changeCount'],methods:{clickFn(){this.$emit('changeCount',1)}}
}
</script>

<template><div class="card">{{ count }}<Son @changeCount="changeCount"></Son></div>
</template>
<script setup>
import { ref } from 'vue'
import Son from './son.vue'
const count = ref(0)
const changeCount = (str)=>{count.value = str
}
</script><template><button type="button" @click="clickFn">按钮</button>
</template>
<script setup>
const emit = defineEmits('changeCount')
const clickFn = () => {emit('changeCount',1)
}
</script>

四.组件上v-model

1.父传子

a.父组件通过v-bind属性绑定的形式，把数据传递给子组件

b.子组件中，通过props接受子组件传递过来的数据

<template><div>父组件</div><DemoSon :msg="msg"></DemoSon>
</template>
<script>
import DemoSon from './son.vue'
export default {name:'demo',components:{DemoSon},data(){return{msg:'111'}}
}
</script><template><div>子组件</div><p>{{ msg }}</p>
</template>
<script>
export default {name:'demo-son',props:{msg:{type:[Number,String],required:true,default:10}}
}
</script>

2.子传父

a.在v-bind指令前添加v-model指令

b.在子组件中声明emits自定义事件，格式为update:xxx

c.调用$emit()触发自定义事件，更新父组件中的数据

<template><div class="card">{{ count }}<Son v-model:number="count"></Son></div>
</template>
<script >
import Son from './son.vue'
export default{name:'index',components: {Son},data(){return{count:0}}
}
</script><template>{{ number }}<button type="button" @click="clickFn">按钮</button>
</template>
<script>
export default{name:'son',props:['number'],emits:['update:number'],methods:{clickFn(){this.$emit('update:number',this.number+1)}}
}
</script>