検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Vueコンポーネントで値を渡すにはどのような方法がありますか?

Vueコンポーネントで値を渡すにはどのような方法がありますか?

青灯夜游
青灯夜游オリジナル
2021-04-23 18:49:0934979ブラウズ

Vue コンポーネントの値の転送方法: 1. props を使用して親から子に値を転送します; 2. "$emit" を使用して子から親に値を転送します; 3. 兄弟値の転送には EventBus または Vuex を使用します。 4. 「provide/inject」または「$attrs/$listeners」メソッドを使用して、クロスレベルの値の転送を実行します。

Vueコンポーネントで値を渡すにはどのような方法がありますか?

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、Dell G3 コンピューター。

Vue が軽量のフロントエンド フレームワークであり、その中核が コンポーネント ベースの開発 であることは誰もが知っています。 Vue は 1 つずつコンポーネントで構成されており、コンポーネント化は Vue の本質であり、最も強力な機能の 1 つです。コンポーネント インスタンスのスコープは互いに独立しています。つまり、異なるコンポーネント間のデータは相互に参照できません。

しかし、実際のプロジェクト開発プロセスでは、他のコンポーネントのデータにアクセスする必要があるため、コンポーネントの通信の問題が発生します。 Vue のコンポーネント間の関係は、父と子、兄弟、世代です。さまざまな関係に対してデータ転送を実装する方法については、次に説明します。

1. 親コンポーネントは子コンポーネントに値を渡します

つまり、親コンポーネントは属性を通じて子コンポーネントに値を渡します。子コンポーネントは受信する props を渡します。

  • #親コンポーネントの子コンポーネント タグでカスタム プロパティをバインドします

    // 父组件
<user-detail :myName="name" />
    
export default {
    components: {
        UserDetail
    }
    ......
}
  • サブコンポーネント内で props (配列またはオブジェクト) を使用してそれを受け取るだけです。複数の属性を渡すことができます。

    #

    // 子组件
export default {
    props: [&#39;myName&#39;]
}

/*
props: { myName: String } //这样指定传入的类型，如果类型不对会警告
props: { myName: [String, Number] } // 多个可能的类型
prosp: { myName: { type: String, requires: true } } //必填的的字符串
props: { 
    childMsg: { 
        type: Array, 
        default: () => [] 
    }
}  // default指定默认值
如果 props 验证失败，会在控制台发出一个警告。
*/

  • 子コンポーネントが受け取る親コンポーネントの値は、参照型と共通型の 2 つの型に分けられます。

一般的な型: String、Number、Boolean、Null

参照型: Array、Object (Object)

vue に基づく

一方向のデータ フロー

、つまり、コンポーネント間のデータは一方向の流れであり、子コンポーネントは親コンポーネントに直接アクセスすることはできません。渡された値は変更されるため、この操作は親コンポーネントによって渡された値を直接変更することは避けるべきです。そうしないと、コンソールでエラーが報告されます。

    渡された値が単純なデータ型の場合、子コンポーネントで変更でき、他の兄弟の親からの呼び出しには影響しません。コンポーネント: コンポーネントの値。

  • 具体的な操作は、

    渡された値をデータ内の変数に再割り当てし、その変数を変更することです

    。 

    // 子组件
export default {
    props: [&#39;myName&#39;],
    data() {
        return {
            name : this.myName    // 把传过来的值赋值给新的变量
        }
    },
    watch: {
        myName(newVal) {
            this.name = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
        }
    },
    methods: {
        changeName() {  
            this.name = &#39;Lily&#39;  // 这里修改的只是自己内部的值，就不会报错了
        },
    }
}

    • 注:

  • watch を使用して親コンポーネントによって渡された myName 値を監視しない場合、データ内の name: this.myName は初期値を定義するだけであるため、子コンポーネントは親コンポーネントの myName 値によって変更されません。

    • #参照型の値が子コンポーネントで変更されると、データはパブリックであり、他のデータも同様であるため、親コンポーネントも変更されます。参照値のサブコンポーネントもそれに応じて変更されます。親コンポーネントから子コンポーネントに渡される値は、コピーを作成することと同じであり、このコピーのポインタは依然として親コンポーネント内のポインタを指しており、同じ参照を共有していることがわかります。したがって、特別な必要がない限り、安易に変更しないでください。

    • 2. サブコンポーネントは親コンポーネントに値を渡します

1. サブコンポーネントはイベントをバインドし、それをトリガーしますthis.$emit()

子コンポーネントでイベントをバインドし、このイベントの関数を定義します

// 子组件
a06555d3f9bc1acdc3ad873256d98d56改变父组件的name65281c5ac262bf6d81768915a4a77ac0

export default {
    methods: {
        //子组件的事件
        changeParentName: function() {
            this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
            // 注：此处事件名称与父组件中绑定的事件名称要一致
        }
    }
}
親コンポーネントで定義し、handleChange をバインドしますイベント

// 父组件
07641efda433f8c7133a4cfdcc3be7e37d4dd9c7239aac360e401efe89cbb393

methods: {
    changeName(name) {  // name形参是子组件中传入的值Jack
        this.name = name
    }
}

2. コールバック関数を通じて

#最初に親コンポーネントでコールバック関数を定義し、コールバック関数を渡します

// 父组件
75a731d8f89d34d432d15a53f1e4455b7d4dd9c7239aac360e401efe89cbb393
methods: {
    callback: function(name) {        this.name = name
    }
}

子コンポーネントで受信し、コールバック関数 #
// 子组件
2cea546566374ab655a087de52a59050改变父组件的name65281c5ac262bf6d81768915a4a77ac0
props: {
    callback: Function,
}

3 を実行します。$parent / $children または $refs

これらの両方を通じてコン​​ポーネント インスタンスにアクセスしますコンポーネントのインスタンスを直接取得するためのもので、使用後はコンポーネントのメソッドを直接呼び出したり、データにアクセスしたりできます。 

// 子组件
export default {
  data () {
    return {
      title: '子组件'
    }
  },
  methods: {
    sayHello () {
        console.log('Hello');
    }
  }
}
// 父组件
d477f9ce7bf77f53fbcf36bec1b69b7a
  cd83204ea32f59c3e11c87bfe8fe7c23
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
  export default {
    created () {
      // 通过 $ref 来访问子组件
      console.log(this.$refs.childRef.title);  // 子组件
      this.$refs.childRef.sayHello(); // Hello
      
      // 通过 $children 来调用子组件的方法
      this.$children.sayHello(); // Hello 
    }
  }
2cacc6d41bbb37262a98f745aa00fbf0

注: この方法でのコンポーネント通信はレベルを越えることはできません。

4. $attrs / $listeners 詳細についてはここをクリックしてください

三、兄弟组件之间传值

1、还是通过 $emit 和 props 结合的方式

在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件

// 父组件
17fea1a7602fd91b427ad17979409c59
760952284b32fe2031f519d27b0e25d2  
    
export default {
    data() {
        return {
            name: 'John'
        }
    },
    components: {
        'child-a': ChildA,
        'child-b': ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

在子组件B中接收变量和绑定触发事件

// child-b 组件
e388a4556c0f65e1904146cc1a846bee姓名：{{ myName }}94b3e26ee717c64999d7867364b1b4a3
023898c17fc87db1696b47c8a39290f3修改姓名65281c5ac262bf6d81768915a4a77ac0
    
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit('changeName', 'Lily')   // 触发事件并传值
        }
    }
}
2cacc6d41bbb37262a98f745aa00fbf0
// child-a 组件
e388a4556c0f65e1904146cc1a846bee姓名：{{ newName }}94b3e26ee717c64999d7867364b1b4a3
    
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判断是否有值传过来
                return this.myName
            }
            return 'John' //没有传值的默认值
        }
    }
}
2cacc6d41bbb37262a98f745aa00fbf0

即：当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。

2. 通过一个空 vue 实例

创建一个 EventBus.js 文件，并暴露一个 vue 实例

import Vue from 'Vue'export default new Vue()

在要传值的文件里导入这个空 vue 实例，绑定事件并通过 $emit 触发事件函数

(也可以在 main.js 中全局引入该 js 文件，我一般在需要使用到的组件中引入)

d477f9ce7bf77f53fbcf36bec1b69b7a
    dc6dce4a544fdca2df29d5ac0ea9906b
        e388a4556c0f65e1904146cc1a846bee姓名: {{ name }}94b3e26ee717c64999d7867364b1b4a3
        023898c17fc87db1696b47c8a39290f3修改姓名65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import { EventBus } from "../EventBus.js"

export default {
 data() {
     return {
         name: 'John',
     }
  },
  methods: {
      changeName() {
          this.name = 'Lily'
          EventBus.$emit("editName", this.name) // 触发全局事件,并且把改变后的值传入事件函数
      }
    }
}
2cacc6d41bbb37262a98f745aa00fbf0

在接收传值的组件中也导入 vue 实例，通过 $on 监听回调，回调函数接收所有触发事件时传入的参数

import { EventBus } from "../EventBus.js"

export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
         EventBus.$on('editName', (name) => {
             this.name = name
         })
    }
}

这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便，但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理。

3. 使用 vuex →点这里

四、多层父子组件通信

有时需要实现通信的两个组件不是直接的父子组件，而是祖父和孙子，或者是跨越了更多层级的父子组件，这种时候就不可能由子组件一级一级的向上传递参数，特别是在组件层级比较深，嵌套比较多的情况下，需要传递的事件和属性较多，会导致代码很混乱。

这时就需要用到 vue 提供的更高阶的方法：provide/inject。

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。查 看 官 网

provide/inject：简单来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量，不管组件层级有多深，在父组件生效的生命周期内，这个变量就一直有效。

父组件：

export default {
  provide: { // 它的作用就是将 **name** 这个变量提供给它的所有子组件。
    name: 'Jack'
  }
}

子组件：

export default {
  inject: ['name'], // 注入了从父组件中提供的name变量
  mounted () {
    console.log(this.name);  // Jack
  }
}

注：provide 和 inject 绑定并不是可响应的。即父组件的name变化后，子组件不会跟着变。

如果想要实现 provide 和 inject 数据响应，有两种方法：

  • provide 祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在后代组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如 props，methods
// 父组件　
dc6dce4a544fdca2df29d5ac0ea9906b
      023898c17fc87db1696b47c8a39290f3修改姓名65281c5ac262bf6d81768915a4a77ac0
      f6e50660328b0f8ee98e871de7e92ca3
16b28748ea4df4d9c2150843fecfba68
3f1c4e4b6b16bbbd69b2ee476dc4f83a
    ......
    data() {
        return {
            name: "Jack"
        };
    },
    provide() {
        return {
            parentObj: this //提供祖先组件的实例
        };
    },
    methods: {
        changeName() {
            this.name = 'Lily'
        }
    }
2cacc6d41bbb37262a98f745aa00fbf0

后代组件中取值：　　

d477f9ce7bf77f53fbcf36bec1b69b7a
　　3f6cd53913cdb5cc95b1ed83851f3420
　　　　64e5601d0a941f4972a2954192bdae18姓名：{{parentObj.name}}ee2bfd64228f824cf6027e0da2815b78
　　16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
　　export default {
　　　　inject: {
　　　　　　parentObj: {
　　　　　　　　default: () => ({})
　　　　　　}
　　　　} // 或者inject: ['parentObj']
　　};
2cacc6d41bbb37262a98f745aa00fbf0

注：这种方式在函数式组件中用的比较多。函数式组件，即无状态(没有响应式数据)，无实例化(没有 this 上下文)，内部也没有任何生命周期处理方法，所以渲染性能高，比较适合依赖外部数据传递而变化的组件。

  • 使用 Vue.observable 优化响应式 provide，这个我用的不熟就不说了，可以 → 官方文档

 总结

  • 父子通信：父向子传递数据是通过 props，子向父是通过 $emit；通过 $parent / $children 通信；$ref 也可以访问组件实例；provide / inject ；

  • 兄弟通信： EventBus；Vuex；

  • 跨级通信： EventBus；Vuex；provide / inject ；$attrs / $listeners；

相关推荐：《vue.js教程》

以上がVueコンポーネントで値を渡すにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：vuex の使用シナリオは何ですか次の記事：vuex の使用シナリオは何ですか

関連記事

続きを見る