vue组件传值、调用组件方法、组件接值限制

组件的引用：

import vmsContentUpdate from "@/views/workbench/config/vms-content-update";

引用之后需要在components里面进行声明：

export default {
    components：{
        vmsContentUpdate，
    }
}

然后就可以在视图进行使用：

<view>
    //组件
    <vms-content-update ref="vmsContentUpdate"></vms-content-update>
</view>

调用组件内部方法习惯用：

//init为组件内部方法名。
this.$refs.vmsContentUpdate.init();

触发vmsSizeDivStyle事件时，改变组件值

methods：{
    vmsSizeDivStyle(){
        this.$refs.vmsContentUpdate.dataList();
    }
}

传值： 父

<vms-content-update ref="vmsContentUpdate" name="data"></vms-content-update>
export default{
  data(){
      return{
          data:xxx;
      }
  }
}

子组件使用poops关键词，后面跟着的都是父给子的数据名

props:["name"]或props:{name：String}，

二：同样使用props关键字，但是结构不同。个人觉得这种写法比较好，更方便看传的数据类型和默认值以及是否必填，增加代码可读性。 结构是这样的：

//type关键词规定数据类型；default规定是否默认值；required规定是否必填项。
props:{
    isShowDialog:{
        type:Boolean,//数据类型为布尔值
        default:false,//默认为false
    }，
    name:{
        type：'String'，
        required：true，//是否比填项
    }
}