父传子

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组件要用的数据就需要这样互相来传递告知其他组件当前的数据,作用就是大家的数据都要得到同步,可以使用事件总线来做通信

Vue 组件通讯 props接受形式有哪些相关推荐

Vue组件选项props
前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
VUE组件通讯——父子互传、互调
目录一.通过 $parent 和 $root 获取父/根组件实例二.通过 $refs 获取子组件实例在循环中使用ref 三.通过 prop 向子组件传值命名方式动态属性字面量语法 vs 动 ...
Vue组件通讯方式 provide/inject 介绍以及使用场景
文章目录 vue的通讯方式 provide / inject的缺点使用办法代码案例展示一(provide字符串) 代码案例展示二(provide返回一个方法,并且方法返回字符串) vue的通讯方式 ...
vue组件通讯：父传子、子传父、事件发射详解
1.组件通讯每个组件有自己的数据, 提供在data中:每个组件数据独立, 组件数据无法互相直接访问 (合理的) 但是如果需要跨组件访问数据, 怎么办呢? => 组件通信组件通信的方式有 ...
九段刀客：vue组件通讯
组件通信的方法: 1.props和emit 2.vuex 3.bus 4.children和parent 5.ref props和emit() 说明:props和emit用于父子组件通讯,props父 ...
vue 组件，props 属性，Vue 生命周期
本文涉及3个内容: 1.vue 组件: 目录结构: 源码分析如下: <div id="container"><h3>爱吃什么水果? app 实例</ ...
Vue组件传值(props属性,父到子,子到父,兄弟传值)
文章目录 @[TOC](文章目录) 前言一.props是什么? 使用规则二.父传子 props 实现步骤代码实现效果展示二.子传父 $emit 实现步骤代码实现效果展示三.兄弟传值 E ...
vue组件中props与data的结合使用
如前所述(vue组件属性(props)及私有数据data),vue组件中,props是组件公有属性,对外:data是组件的私有数据,对内.正因为props对外,由外部赋值,因此在组件内部,是只读的,即 ...
【视频】vue组件之props属性
P9vue组件之props属性 https://www.bilibili.com/video/av91679349?p=9

Vue 组件通讯 props接受形式有哪些

父传子

数组形式接收

对象类型接收

props对象接收的值怎么使用: 直接使用

子传父:

Vue 组件通讯 props接受形式有哪些相关推荐

最新文章

热门文章