单向数据流
父组件与子组件之间形成单向数据流，父组件属性的更新会下流到子组件中，每次父组件发生更新时，子组件所有从父组件接收的属性prop都会更新为最新的值。但是反过来则不行，子组件不能直接修改从父级传递过来的数据，这样可以防止子组件意外改变父组件的状态。
原本父组件向子组件传递过来的数据，子组件中利用
props数组接收，之后便可以在子组件中直接使用即可
具体可看下边的示例：
<div id="app">
<h1>这是父组件</h1>
<input type="button" value="父组件中的按钮" @click='change'>
<sub-component :count = 'count'></sub-component>
</div>
<template id="sub">
<div>
<h1>这是子组件</h1>
<input type="button" value="子组件中的按钮" @click='changeCount'>
{{count}}
</div>
</template>
// 全局组件
Vue.component('sub-component',{
props:['count'],
template:'#sub',
methods: {
changeCount(){
this.count++
}
}
})
var vm = new Vue({
el:'#app',
data:{
count:0
},
methods:{
change(){
this.count++
}
}
})
页面效果：
页面效果
当点击子组件中的按钮时，后边的数字会加1，虽然能达到效果，但是控制台上会报错，如图：
image.png
意思是：避免直接操作prop属性，因为当父组件重新渲染的时候，该值会被覆盖。相反，使用基于该值的data数据或者是计算属性。
该原因的现象就是：点击子组件中的按钮，虽能达到效果，比如说从0加到了8，但是点击父组件中数据的时候，数据又一下子变成了1，因为父组件中是从0加到1，子组件中的值会被覆盖，这就是 单向数据流。
解决办法：
1. 使用data将其作为本地的数据
image.png
在子组件中也使用initCount属性
image.png
页面效果：
image.png
可以看出两个组件中的数据互不干扰。
2. 使用计算属性
使用场景：传过来的值可能需要做一些转换。
Vue.component("custom-component", {
data() {
return {
initCount: this.count
}
},
//与直接使用data不同的是这里添加选项参数计算属性`computed`
computed: {
initCount2() {
return this.initCount;
}
},
props: ['count'],
template: `
<div>
<h1>一个自定义模版</h1>
<input type="button" @click="changeCount" value="按钮"/>
<!--这里现在使用的是computed里的函数返回结果-->
{{initCount2}}
</div>`,
methods: {
changeCount() {
this.initCount++
}
}
});
子组件向外传值
挂载自定义事件
现在增加一个场景，在父组件也使用了count，当点击按钮的同时，父组件的count值同时也发生变化。
<section id="app">
<h3>父组件使用了count</h3>
<p>{{count}}</p>
<!--需要在自定义模版标签上添加一个自定义事件来接收count值-->
<custom-component :count="count" @increment-click="countHandle"></custom-component>
</section>
添加“通知”处理
此时，需要在子组件的点击触发事件changeCount()里做一个“通知”处理
changeCount() {
this.initCount++;
//触发一下"increment-click"事件， 通知父组件
this.$emit("increment-click");
}
自定义事件
同时，也要在实例的作用域下增加自定义事件countHandle()
methods: {
countHandle() {
//此处的this.count 属于父组件的count
this.count++;
}
}
props验证
语法
- Key值为所需要验证的数据
-
验证类型为原生构造器：
String，Number，Function，Object，Boolean，Array
props:{
propA:Number //单个指定类型
propB:[String,Number],//多个指定类型
propC:{
//必传，且指定类型为字符串
type:String,
required:true
},
propD:{
//数值类型，默认值为1000
type:Number,
default:function(){
return 1000;
}
}
propE:{
//自定义验证规则
validator:function(value){
return value>10
}
}
}
多提一句，在 propD里，添加了个默认值default，在自定义标签上就可以不用绑定count。
<!--未使用default-->
<custom-component :count="count" @increment-click="countHandle"></custom-component>
<!--使用default-->
<custom-component @increment-click="countHandle"></custom-component>
代码示例：
// props:['count'],
props:{
count:{
type:Number,
required:true,
// 自定义规则
validator(value){
return value > 10
}
}
}
若不满足条件的话，控制台则会报错，我这里是设置的传入的count值要大于0，但是传入的初始值是0
image.png
count属性自定义规则验证失败
参考链接
