Vue 组件通讯 props接受形式有哪些
props对象接收的值怎么使用通过对象的方式定义props成员,可以为每个prop成员制定规则(类型,校验…),常用的如下.父传子props接受的形式
·
目录
父传子
1、父组件 非变量 自定义属性传值 ,没有:
<template>
<div class="Test">
<cmpone forChildMsg="字符串随便写不是动态传值没有:"></cmpone>
</div>
</template>
<script>
import Cmpone from './Cmpone'
export default {
name: 'Test',
components:{
Cmpone,
}
}
</script>
<style scoped>
</style>
子组件接收:
<template>
<div class="cmpone">
<div>{{forChildMsg}}</div>
</div>
</template>
<script>
export default {
name: 'Cmpone',
components:{
},
props: ["forChildMsg"]
}
</script>
<style scoped>
</style>
2、父组件 变量 自定义属性传值 ,有:
<template>
<div class="Test">
<cmpone :forChildMsg="forChildMsg"></cmpone>
</div>
</template>
<script>
import Cmpone from './Cmpone'
export default {
name: 'Test',
components:{
Cmpone,
},
data(){
return{
forChildMsg:'父组件向子组件传递数据 这是动态的上面加:必须下面定义数据'
}
}
}
</script>
<style scoped>
</style>
子组件接收动态的值:
<template>
<div class="cmpone">
<div>{{forChildMsg}}</div>
</div>
</template>
<script>
export default {
name: 'Cmpone',
components:{
},
props: ["forChildMsg"]
}
数组形式接收
props: ['title', 'age']
数组形式接收 通过数组的方式定义props成员,用于接收父组件传递的数据 相当于data中的变量 它的缺点:无法为每个 prop 指定具体的数据类型,也无法进行相应的校验
对象类型接收
通过对象的方式定义props成员,可以为每个prop成员取属性名、制定规则(类型,校验…),常用的如下:
- 基础的类型检查type:[Number]
- 多个可能的类型 type:[Number,String]
- 必填项校验 required:true
- 属性默认值 default:默认值 在没有传递值的情况下就会使用默认值,但是[required跟default配置只能有一个]
- 自定义验证函数 validator(val) {}
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
props对象接收的值怎么使用: 直接使用
相当于data可直接this.props拿取
有时候会获取不到,这时候可以用一个定时器来获取
//解构
let {propC,propB}=this.props;
setTimeout(()=>{
console.log(this.props)
console.log(propC,111111)
},2000)
}
父组件请求网络数据,子组件获取不到值。props为undefined
主要原因就是请求数据异步的,还没请求完就已经渲染了,解决办法就是 在渲染的时候给组件标签上面加一个条件渲染,在父组件请求完成后,将数据赋值,然后将渲染表达式成立;
<template>
<div id="home">
//这样可以等网络请求完了再将值传到子组件
<div if="flag" :parentData="testData"></div>
</div>
</template>
<script>
export default {
data() {
return {
flag:false,
testData:''
};
},
methods: {
getTestData(){
this.$http({
url:"",
data:"",
method:"",
}).then((res)=>{
console.log(res);
this.testData = res;//请求的数据赋值完毕后 把flag为true; 上面标签为true才显示传值
this.flag = true;
})
},
created() {},
};
</script>
子传父:
具体实现: 子组件通过绑定事件触发函数, 在函数设置this.$emit(‘要派发的自定义事件’,要传递的值‘),父组件使用@自定义属性接收事件,作为函数在父组件使用以此操作子组件的值,子组件传的值作为函数的形参
子组件
<template>
<div id="child">
<div @click="$emit('chooseNum',num)">{{num}}</div>
</div>
</template>
<script>
export default {
data() {
return {
// 这是子组件我要将子组件的num传到父组件去
num:666
};
},
methods: {},
computed: {},
components: {},
created() {},
};
</script>
<style lang="scss" scoped >
</style>
父组件
<template>
<div id="home">
<num @chooseNum="chooseNum"></num>
<!-- 使用返回顶部组件 -->
<!-- <scrollTop></scrollTop> -->
</div>
</template>
<script>
// import scrollTop from "../components/BackToTop";
import num from "../components/Child";
import { log } from 'util';
export default {
data() {
return {
};
},
methods: {
chooseNum(num){//上面使用@自定义事件接受,这里形参还要写从子组件传的值
console.log(num); // 666接受到子组件的值了
}
},
computed: {
},
components: {
// scrollTop,
num,
},
created() {},
};
</script>
什么时候子传父,什么时候父传子?
父组件需要子组件的数据或者也可以说是某个状态,就可以使用子组件向父组件props+事件传值…..
兄弟组件也是一样, a组件有b组件要用的数据就需要这样互相来传递告知其他组件当前的数据,作用就是大家的数据都要得到同步,可以使用事件总线来做通信
更多推荐
已为社区贡献1条内容
所有评论(0)