vue--三种组件中之间的传值

一、父子组件之间的传值----props/$emit

组件之间的传值，我们比较常用到的是props/$emit

1、父组件向子组件传值--props

这里我们在父组件中定义的extensionObj是一个对象

<Extension :extensionObj="extensionObj"/>

data(){
    return{
        extensionObj: {},
    }
}

在子组件中接收值

props:['extensionObj'],

或者

props:{
    extensionObj: {
        type: Object,
        default: {}
    },
},

2、子组件想父组件传值

子组件：

<col @click="tableClickBtn(item)"></col>

写个方法触发

tableBtnClick(item){
    this.$emit('select',item);
}

父组件：

<StaffDialog ref="staffDialogRef" @select="staffDialogSelect"/>

写个方法接收

staffDialogSelect(item) {
    this.searchObj = item;
}

这里组件的注册就不写了

二、父组件向下（深层）子组件传值----provide/inject

这里引用vue官网文档里的话

• 类型：

  • provide：Object | () => Object
  • inject：Array<string> | { [key: string]: string | Symbol | Object }

• 详细：

  provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

• provide 选项应该是一个对象或返回一个对象的函数

• inject 选项应该是：

  • 一个字符串数组，或
  • 一个对象，对象的 key 是本地的绑定名，value 是：
    • 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
    • 一个对象，该对象的：
      • from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
      • default property 是降级情况下使用的 value

　　示例

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

记录一段实战中的代码

父组件中getCustInfo为接口返回的数据

provide(){
    return {
        getCustInfo: this.getCustInfo
    }
},

子组件接收

inject: ['getCustInfo'],

这里的getCustInfo也可以个是一个方法，返回一个函数

methods:{
    getCustInfo(){
        return this.custInfo; //custInfo是接口返回的数据
    }
}

那么，子组件的接收应该这样

custInfo(){
    return this.getCustInfo();
},

 

三、访问父、子组件----ref、$parent/$child

1、ref--在父组件中访问子组件

引用官网api：

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如：

<base-input ref="usernameInput"></base-input>

现在在你已经定义了这个 ref 的组件里，你可以使用：

this.$refs.usernameInput

注意：$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

2、父、子组件之间的访问

引用官网api：

指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信

 

这里组件之间的访问，目前实战中用到的较少。按官网的话，就是不太建议使用。

至于event bus暂时还没有用到过，Vuex状态管理用于权限管理，这个就后期再写写