vue祖孙组件间传值

provide是一个对象或返回一个对象的函数。该对象包含可注入其子孙的property

在最外层组件(祖先)使用provide，如下：

    data() {return {featureQuery: {layerList: [],  //图层列表数据layerType: "",  //图层类型(symbol:点,line:线)layerCode: "",  //图层code},}},provide() {return {queryData: this.featureQuery}},

当然this.featureQuery可以改为this，element的组件中也是用的this，但页面中变量及方法比较多，担心会有性能方面影响，故而只注入部分使用到的变量。

在需要用到这些变量的页面中使用inject，如下：

    inject: ['queryData'],watch: {"queryData.layerCode": {handler(obj) {},deep: true,},},

然后即可在该页面直接this.queryData.layerCode使用，也可以进行监听。这样即完成了祖先向子孙传值

如果子组件需要调用父/祖先的方法，第一种可以将上面的this.featureQuery改为this，然后直接在子孙组件通过this.queryData[方法名]即可，另一种就是通过emit传回去，可以使用$listeners，使用方法如下

有A、B、C三个页面，B是A的子组件，C是B的子组件
C组件

//页面点击事件
handleClick(data) {this.$emit("current-layer", data);
}

B组件(页面引入C组件的地方添加v-on=“$listeners”)

<C v-on="$listeners"></C>

A组件

<B @current-layer="handleChangeLayer"></B>handleChangeLayer(data){//这里调用A组件的方法即可
}

vue祖孙组件间传值相关推荐

【Vue】组件间传值的三种方式：父传子，子传父，非父子传值
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 1,父组件传值给子组件代码: &l ...
[vue] 父子组件间传值
环境说明: vue 3.x + ant-vue 父组件(Album.vue)使用: <template><div><a-button type="primary ...
vue父子组件间传值(props)
先定义一个子组件,在组件中注册props <template><div><div>{{message}}(子组件)</div></div> ...
vue项目原理分析-1：组件间传值
整个项目目录(create project后) vue.config.js的配置 // vue.config.js 常⽤配置 module.exports = {devServer:{port:333 ...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
vue 组件间传值、兄弟组件、bus方式 ( 1 分钟看懂 )
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. bus方式的组件间传值其实就是建立一个公共的js文件,专门用来传递消息 1.建立公共文件,并引入新 ...
vue向ifarm传值_vue组件间传值
目前流行组件化开发,vue组件间传值是一个非常常用的功能,有时候仅仅是父子和兄弟之间简单的传值,我们就没有必要直接引入vuex来进行管理. # 1.父子间传值 ## 1.1 子组件向父组件传值子组件 ...
Vue组件间传值详解
文章目录 1. 父组件向子组件传值 1.1 描述 1.2 props接收数据: 2. 子组件向父组件传值 3. 兄弟组件间传值 4. 事件总线 5. Ref 6. root/parent/childr ...
vue组件间传值的六种方法
一. vue组件间传值 1. 父组件向子组件进行传值props 父组件代码: <template><div>父组件:<input type="text" ...

vue祖孙组件间传值

vue祖孙组件间传值相关推荐

最新文章

热门文章