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

目录

 父传子

数组形式接收 

对象类型接收   

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成员取属性名、制定规则(类型,校验…),常用的如下:

  1. 基础的类型检查type:[Number]
  2. 多个可能的类型 type:[Number,String]
  3. 必填项校验 required:true
  4. 属性默认值 default:默认值  在没有传递值的情况下就会使用默认值,但是[required跟default配置只能有一个]
  5. 自定义验证函数 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组件要用的数据就需要这样互相来传递告知其他组件当前的数据,作用就是大家的数据都要得到同步,可以使用事件总线来做通信

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彩色之外

你的打赏是我创作的氮气加速动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值