vue 父子组件间 ~ 获取数据和方法 + 祖父孙 组件 传值props

父组件获取子组件数据和方法

1. 写好一个子组件并引用
   

子组件内容

 <div class="treeBox">
    <fks-input placeholder="请输入内容" v-model="filterText"></fks-input>
    <fks-tree 
      show-checkbox
      node-key="id" 
      :data="list"
      :props="defaultProps"
      @check="handleCheckChange"  //方法 
    ></fks-tree>
  </div>

2. 调用 子组件 并 定义一个 ref = ''

    <lookRido ref="lookRido" :FcompanyData="FcompanyData" @gotolook="gotolook"></lookRido>
    // :FcompanyData="FcompanyData" 父组件传值给子组件   子组件props: [ ] 接收

3. 父组件 获取子组件数据 通过：
   1 . “ref” 方式

   // this.$refs.lookRido.属性
   ->  this.$refs.lookRido.selected.id; this.$refs.lookRido.windown = true;
   // this.$refs.lookRido.方法 
   ->  this.$refs.lookRido.lookOther();

2. “$emit” 方式

  子组件传参
 handleCheckChange(data) {
     this.$emit('handle-checkChange', data); 传给 父组件 方法和 参数
    },

父组件接收使用
  <lookRido  @handle-checkChange="handleCheckChange" ></lookRido>
  //方法
   handleCheckChange(data, checkedNodes) { 
      console.log(data, checkedNodes);  
        this.$emit('handle-checkChange', data); //可以一直往上层传递
    },

孙 父 子组件获取父组件数据和方法

1. 子组件通过 prop 接收父组件传值

//与  data（）{} 平级
props: ["FcompanyData"],

2. “ref” 方式

    // this.$parent.属性
   ->  this.$parent.selected.id; 
   // this.$parent.方法 
   ->  this.$parent.gotolook();

3 孙组件 获取 祖组件 数据和方法 通过：

 this.$parent.$parent.btnFlag = true;

祖组件 定义引用父组件写法同上

定义并赋值所传数据 (在祖组件中)

commonItemFlag:false,
poiName:'参数', 
 methods: {
    closebox() {
      this.ommonItemFlag = true;
      this.dataList:{
       stage:'名称',
       show:false,
       childrenShow:false
    }
 },

父组件

  //  通过commonItemFlag 的true,false显示子组件
 <CommonItem
      v-if="commonItemFlag"
      :title="poiName"
      :dataform="dataList"  //传参
      ref="sondata"
    ></CommonItem>

<div class="CommonItem" v-show="dataform.show"> </div>

祖父子组件传参 props

// props 直接接收,下面直接可以使用
props: {
    title: {
      type: String,
      default: "",
    }, 
    dataform: {
      type: Object,
      default: () => {},
    }, 
  },

定义并赋值所传数据

methods:{
this.dataform.show = false;
 this.dataform.childrenShow = true;
}

子组件

引用子组件后根据条件显示

props: {
    title: {
      type: String,
      default: "",
    }, 
    dataform: {
      type: Object,
      default: () => {},
    }, 
  },
 <ProjectForm
      :dataform="dataform"
      v-if="dataform.stage ? true : false"
  ></ProjectForm> 

<div class="ProjectForm" v-show="dataform.childrenShow"></div>