本文将向您介绍如何使用事件发射器在vue.js中将数据及其状态从子组件传递到其父组件。这篇文章适合所有阶段的开发人员,包括初学者。
在你开始之前…
我们可以在Vue.js中使用道具将数据传递到的子组件一文中查看在Vue.js中将数据从父组件传递到子组件的方法。
在阅读本文之前,您应该具备以下几点:
node.js 10.x及以上版本已安装。您可以通过在终端/命令提示符下运行以下命令来验证是否执行此操作:
node -v
代码编辑器——推荐Visual Studio
Vue的最新版本,全球安装在您的机器上
在您的机器上安装了Vue CLI 3.0。要做到这一点,首先卸载旧的CLI版本:
npm uninstall -g vue-cli
然后,安装一个新的:
npm install -g @vue/cli
在这里下载一个Vue入门项目
解压下载的项目
导航到解压缩的文件,并运行以下命令,以保持所有的依赖关系的最新:
npm install
通过组件传递数据
为了将数据值从应用程序组件中的父组件(如app.vue)传递给子组件(如嵌套组件),Vue.js为我们提供了一个名为props的平台。
可以将道具称为自定义属性,您可以在组件上注册,该组件允许您在父组件中定义数据,为其赋值,然后将值传递给一个道具属性,该属性可以在子组件中引用。
这篇文章将向你展示这个过程的反面。为了从子组件传递和更新父组件中的数据值,以便所有其他嵌套组件也将被更新,我们使用emit构造来处理事件发射和数据更新。
示例:
您将经历以下过程:从子组件发出事件,设置监听父组件以便从子组件传递数据,最后更新数据值。
如果您从一开始就关注这篇文章,那么您将下载并在vs代码中打开starter项目。这个项目是完成的,完整的代码到这篇文章。
将其作为启动项目的原因是,在引入反转过程之前,您可以尝试一下道具概念。
开始
在该文件夹中,您将找到两个子组件:test.vue
和test2.vue
,其父组件是app.vue
文件。 我们将使用两个子组件的标题来说明此事件发出方法。 您的Test.vue
文件应如下所示:
<template> <div> <h1 id="Vue-nbsp-Top-nbsp-nbsp-Artists">Vue Top 20 Artists</h1> <ul> <li v-for="(artist, x) in artists" :key="x"> <h3 id="artist-name">{{artist.name}}</h3> </li> </ul> </div> </template> <script> export default { name: 'Test', props: { artists: { type: Array } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> li{ height: 40px; width: 100%; padding: 15px; border: 1px solid saddlebrown; display: flex; justify-content: center; align-items: center; } a { color: #42b983; } </style>
要使标题从数据属性部分中的隐式定义中接收标题,请创建数据部分并添加定义,然后在模板中添加插值符号,如下所示:
<template> <div> <h1 id="header">{{header}}</h1> <ul> <li v-for="(artist, x) in artists" :key="x"> <h3 id="artist-name">{{artist.name}}</h3> </li> </ul> </div> </template> <script> export default { name: 'Test', props: { artists: { type: Array } }, data() { return { header: 'Vue Top Artists' } } } </script>
如果您运行应用程序,您将得到与开始时完全相同的接口。下一步是在click
上更改这个已定义的属性。
切换标题
要切换标题,您必须在单击时将事件侦听器添加到标题,并指定包含将在单击时发生的逻辑的函数。
<template> <div> <h1 id="header">{{header}}</h1> <ul> <li v-for="(artist, x) in artists" :key="x"> <h3 id="artist-name">{{artist.name}}</h3> </li> </ul> </div> </template> <script> export default { name: 'Test', props: { artists: { type: Array } }, data() { return { header: 'Vue Top Artists' } }, methods: { callingFunction(){ this.header = "You clicked on header 1"; } } } </script>
现在,您的标题更改为调用函数内的字符串单击。
设置发射器
在此阶段,您希望将相同的行为传递给父组件,以便在单击时,父组件中嵌套的每个标题都将更改。
为此,您将创建一个发射器,它将在子组件中发出一个事件,父组件可以侦听该事件并作出响应(这与组件的事件侦听器逻辑相同)。
更改测试中的脚本部分。vue文件到下面的代码块:
<script> export default { name: 'Test', props: { artists: { type: Array }, header: { type: String } }, data() { return { // header: 'Vue Top Artists' } }, methods: { callingFunction(){ // this.header = "You clicked on header 1" this.$emit('toggle', 'You clicked header 1'); } } } </script>
在此,将标题期望的数据类型定义为prop。 然后,在该方法中,有一个generate语句,告诉Vue在切换时发出事件(就像其他事件一样,例如click事件),并将字符串作为参数传递。 这就是设置一个将在另一个组件中侦听的事件的全部。
监听发出的事件
现在,创建事件后要做的下一件事是侦听并响应它。将此代码块复制到您的app.vue文件中:
<template> <div id="app"> <img src="/static/imghwm/default1.png" data-src="./assets/logo.png" class="lazy" alt="Vue logo" > <Test v-bind:header="header" v-on:toggle="toggleHeader($event)" /> <Test v-bind:artists="artists" /> <test2 v-bind:header="header"/> <test2 v-bind:artists="artists" /> </div> </template> <script> import Test from './components/Test.vue' import Test2 from './components/Test2' export default { name: 'app', components: { Test, Test2 }, data (){ return { artists: [ {name: 'Davido', genre: 'afrobeats', country: 'Nigeria'}, {name: 'Burna Boy', genre: 'afrobeats', country: 'Nigeria'}, {name: 'AKA', genre: 'hiphop', country: 'South-Africa'} ], header: 'Vue Top Artists' } }, methods: { toggleHeader(x){ this.header = x; } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
在模板部分,您可以看到第一个组件test
上有两个vue
指令。第一个是v-bind
,它将initial header
属性绑定到artists
数组下的数据对象中的隐式定义;初始化时,将显示字符串vue top artists
。
第二个指令是v-on
,它用于监听事件;要监听的事件是toggle
(记住,您已经在测试组件中定义了它),它的调用函数是toggleheader
。此函数已创建,子组件中的字符串将通过$event
参数传递到此处显示。
含义
这会将数据通过发射器传递到父组件,因此由于其他组件嵌套在父组件中,因此每个嵌套组件中的数据都会重新呈现和更新。进入test2.vue文件并将此代码块复制到其中:
<template> <div> <h1 id="header">{{header}}</h1> <ul> <li v-for="(artist, x) in artists" :key="x"> <h3 id="artist-name-nbsp-from-nbsp-artist-country">{{artist.name}} from {{artist.country}}</h3> </li> </ul> </div> </template> <script> export default { name: 'Test2', props: { artists: { type: Array }, header: { type: String } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> li{ height: 40px; width: 100%; padding: 15px; border: 1px solid saddlebrown; display: flex; justify-content: center; align-items: center; } a { color: #42b983; } </style>
这里,数据插值被设置并指定为道具对象中的一个字符串。在你的开发服务器上运行应用程序:
npm run serve
可以看到,一旦事件在父组件中被响应,所有组件都会更新它们的报头,即使仅在一个子组件中指定了定义。
您可以在github上找到本教程的完整代码。
结论
您可以看到在Vue中使用事件和发射器的另一个有趣的方面:您现在可以在一个组件中创建事件,并在另一个组件中监听它并对它作出反应。
相关推荐:
更多编程相关知识,请访问:编程入门!!
以上がイベント エミッターを使用して Vue.js のコンポーネント データを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Netflixは、主に、パフォーマンス、スケーラビリティ、開発効率、エコシステム、技術的な負債、およびフレームワーク選択におけるメンテナンスコストを考慮しています。 1。パフォーマンスとスケーラビリティ:JavaとSpringbootが選択され、大規模なデータと高い同時リクエストを効率的に処理します。 2。開発効率とエコシステム:Reactを使用して、フロントエンド開発効率を向上させ、その豊富なエコシステムを利用します。 3.技術的な負債とメンテナンスコスト:node.jsを選択してマイクロサービスを構築して、メンテナンスコストと技術的債務を削減します。

Netflixは、主にReactをフロントエンドフレームワークとして使用し、特定の機能のためにVUEによって補足されます。 1)Reactのコンポーネント化と仮想DOMは、Netflixアプリケーションのパフォーマンスと開発効率を向上させます。 2)VueはNetflixの内部ツールと小規模プロジェクトで使用されており、その柔軟性と使いやすさが重要です。

Vue.jsは、複雑なユーザーインターフェイスを構築するのに適した進歩的なJavaScriptフレームワークです。 1)そのコア概念には、レスポンシブデータ、コンポーネント、仮想DOMが含まれます。 2)実際のアプリケーションでは、TODOアプリケーションを構築し、Vuerouterを統合することで実証できます。 3)デバッグするときは、vuedevtools and Console.logを使用することをお勧めします。 4)パフォーマンスの最適化は、V-IF/V-Show、リストレンダリング最適化、コンポーネントの非同期負荷などを通じて達成できます。

Vue.JSは中小企業から中規模のプロジェクトに適していますが、Reactは大規模で複雑なアプリケーションにより適しています。 1。VUE.JSのレスポンシブシステムは、依存関係追跡を介してDOMを自動的に更新し、データの変更を簡単に管理できるようにします。 2.反応は一方向のデータフローを採用し、データは親コンポーネントから子コンポーネントに流れ、明確なデータフローと簡単な抽出構造を提供します。

VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1)Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2)Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。

VUEでタグのジャンプを実装する方法には、HTMLテンプレートでAタグを使用してHREF属性を指定する方法が含まれます。 VUEルーティングのルーターリンクコンポーネントを使用します。 JavaScriptでこれを使用します。$ router.push()メソッド。パラメーターはクエリパラメーターに渡すことができ、ルートは動的ジャンプのルーターオプションで構成されています。

VUEでコンポーネントジャンプを実装するための次の方法があります。Router-Linkと&lt; router-view&gt;を使用してください。ハイパーリンクジャンプを実行し、ターゲットパスとして属性を指定するコンポーネント。 &lt; router-view&gt;を使用してください現在ルーティングされているレンダリングされているコンポーネントを表示するコンポーネント。プログラマティックナビゲーションには、router.push()およびrouter.replace()メソッドを使用します。前者は歴史を保存し、後者は記録を残さずに現在のルートに取って代わります。

VUEにDIV要素をジャンプするには、VUEルーターを使用してルーターリンクコンポーネントを追加するには、2つの方法があります。 @clickイベントリスナーを追加して、これを呼び出します。$ router.push()メソッドをジャンプします。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

SublimeText3 中国語版
中国語版、とても使いやすい

WebStorm Mac版
便利なJavaScript開発ツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
