vue コンポーネントが値を渡す方法: 1. 親から子に渡し、それを受け取るために子コンポーネントで "props" を定義します; 2. 子から親に渡し、"$emit()" を使用してトリガーします子コンポーネント内; 3. Brothers Pass 値、イベント バス "eventBus" を定義; 4. 疑問符、コロン、親子コンポーネントを使用して値を渡します; 5. "$ref" を使用して値を渡します; 6. "inject" を使用します" 親コンポーネントのデータを現在のインスタンスに注入します。 7. 祖先から孫へ; 8. 孫から祖先へ; 9. $parent; 10. SessionStorage 値の転送; 11. vuex.
このチュートリアルのオペレーティング システム: Windows 10 システム、vue バージョン 3.0、Dell G3 コンピューター。
1. 親コンポーネントを子コンポーネントに渡す
子コンポーネントに props、つまり props を定義します。 ['msg' ]、msg はオブジェクトまたは基本データ型になります。
デフォルト値を定義する場合、つまり props:{msg: {type: String,default: 'hello world' }},
デフォルト値がオブジェクトタイプの場合: props: { msg: { type: Object,default: () => { return { name: 'dan_seek' } } }}
値の転送は一方向であり、親コンポーネントの値を変更することはできません (もちろん参照型を除く)。また、props の値を直接変更すると、警告が表示されます。報告。
推奨される記述方法は、data() で変数を再定義し (Children.vue を参照)、それにプロパティを割り当てることです。もちろん、計算されたプロパティも機能します。
Children.vue
父组件传过来的消息是：{{myMsg}}
Parent.vue
2. 子コンポーネントを親コンポーネントに渡す
必要なものここで self を使用するには イベントを定義し、this.$emit('myEvent') を使用して子コンポーネントでイベントをトリガーし、@myEvent を使用して親コンポーネントでリッスンします
Children.vue
click me
Parent.vue
这里是计数：{{parentNum}}
3. 兄弟コンポーネント間での値の転送
カスタム イベント エミットのトリガー機能とモニタリング機能を使用してパブリック イベント バスを定義するイベントバスを中間ブリッジとして介して、任意のコンポーネントに値を渡すことができます。また、eventBus を使用することで、emit についての理解を深めることができます。
EventBus.js
import Vue from 'vue' export default new Vue()
Children1.vue
Children2.vue
children1传过来的消息：{{msg}}
Parent.vue
github からも入手可能オープンソースの vue-bus ライブラリは、https://github.com/yangmingshan/vue-bus#readme
4 を参照してください。ルート間での値の受け渡し
i. 値を渡すには疑問符を使用します。
ページ A からページ B にジャンプするときは、this.$router.push('/B?name=danseek')
Page を使用します。 B は this.$route .query.name を使用して、ページ A
#から渡された値を取得できます。ルーターとルートの違いに注意してください ii。コロンを使用して値を渡します 次のルートを構成します:
{ path: '/b/:name', name: 'b', component: () => import( '../views/B.vue') },
// 子页面 ...... props: ['type'] ...... watch: { type(){ // console.log("在这个方法可以时刻获取最新的数据:type=",this.type) }, },
5. $ref を使用して値を渡す
传过来的消息：{{msg}}
6. 依存関係の注入を使用して子孫や曾孫に渡す
親コンポーネントにメソッド getName() があり、それを提供する必要があると仮定します。すべての子孫にprovide: function () { return { getName: this.getName() } }
inject: ['getName']
父组件传入的值：{{getName}}
7、祖先の孫 $attrs
通常は、Transition の中間として父親の props を使用する必要がありますが、この方法では、親コンポーネントの業務に関係のない属性が親コンポーネントにさらに追加され、結合度が高くなります。 $attrs を使用すると簡略化でき、祖先も孫も #GrandParent.vue父组件收到
祖父的名字：{{name}}
子组件收到
祖父的名字：{{name}}
祖父的性别：{{sex}}
祖父的年龄：{{age}}
祖父的爱好：{{hobby}}
8、孫伝子
$listeners 中間イベントのヘルプを使用すると、Sun は Zu に簡単に通知できます。コード例については、79 を参照してください。$parent
親コンポーネント インスタンスは、parent を通じて取得できます。 , そして、このインスタンスを通じて親コンポーネントのプロパティとメソッドにアクセスできます。また、ルート コンポーネントのインスタンスを取得できる兄弟ルートもあります。 構文:// 获父组件的数据 this.$parent.foo // 写入父组件的数据 this.$parent.foo = 2 // 访问父组件的计算属性 this.$parent.bar // 调用父组件的方法 this.$parent.baz()
10. sessionStorage に値を渡す
sessionStorage 是浏览器的全局对象，存在它里面的数据会在页面关闭时清除 。运用这个特性，我们可以在所有页面共享一份数据。
语法：
// 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();
注意：里面存的是键值对，只能是字符串类型，如果要存对象的话，需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储（使用的时候 let obj = JSON.parse(objStr) 解析为对象）。
这样存对象是不是很麻烦呢，推荐一个库 good-storage ，它封装了sessionStorage ，可以直接用它的API存对象
// localStorage storage.set(key,val) storage.get(key, def) // sessionStorage storage.session.set(key, val) storage.session.get(key, val)
更多请移步：https://github.com/ustbhuangyi/storage#readme
11、vuex
这里我也不打算介绍这个大名鼎鼎的vuex怎么用，因为要把它写清楚篇幅太长了…
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您也许不需要使用 Vuex。
以上がVueコンポーネントで値を渡すにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
