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

彩色之外

已于 2022-01-31 15:50:41 修改

阅读量4.3k

点赞数 3

分类专栏： # vue2 文章标签： vue.js 小程序 javascript

于 2021-12-01 21:29:37 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/121661892

版权

vue2 专栏收录该内容

19 篇文章 9 订阅

订阅专栏

父传子

数组形式接收

对象类型接收

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