vue父组件传递值给子组件笔记

解释：当前vue页面中调用另一个子组件（多用于公共方法抽成子组件调用，在各个页面中都可使用）

子组件定义：

<template>
    <div class="app-container">
      <el-tag :type="cssClass"><!--动态的绑定属性-->
        {{this.dictEntity.dictLabel}}
      </el-tag>
    </div>
</template>

<script>
    export default {
      name: "dict-prop", //可看做子组件标签名
      data(){
          return{
            //实体对象
            dictEntity:undefined,
            cssClass:undefined,
          };
      },
      //接收参数 数组方式接收最保险
      props:['parentDict','parentValue'],
      //{}的方式，指定类型f12可能会存在报错->类型不匹配的问题
     /* props:{
        parentDict:Array,
        parentValue:Number,
      },*/
      created() {
        //转换类型
        const stringValue=this.parentValue.toString();
        //查找当前实体对象
        this.dictEntity = this.parentDict.find(item => item.dictValue === stringValue);
        this.cssClass=this.dictEntity.cssClass;
      },
    }
</script>

<style scoped>

</style>

 父组件传递的值：

v-bind(:)绑定的值跟子组件props中定义的保持一致

父组件中局部注册子组件

局部注册组件，在每个页面中使用都需要重新注册，此时，可以使用全局注册的方式去实现（一次注册，整个项目中都可使用）

main.js中

import zbTag from "@/components/Zmids/Tag" //子组件的引入

Vue.component("zbTag", zbTag)//子组件的全局挂载

即可