Vue.js
In Vue.js 3, `$emit` is a mechanism for firing events from a child component to a parent component to transmit data or trigger actions.
$emit
Vue.js 3における $emit は、子コンポーネントから親コンポーネントにイベントを送るための機能です。これにより、子コンポーネントがデータやアクションを親コンポーネントに伝達できます。
HTML
Copy Code
< div id = " app" >
< child-component @custom-event = " handleEvent" > </ child-component>
</ div>
< script src = " https://unpkg.com/vue@3/dist/vue.global.js" > </ script>
< script>
< ! -- JavaScript code here -- >
</ script>
JavaScript
Copy Code
const { createApp } = Vue ;
const Childcomponent = {
template : `
<button @click="emitEvent">Event Send</button>
` ,
methods : {
emitEvent ( ) {
this . $emit ( 'custom-event' , 'Hello from child!' ) ;
}
}
} ;
createApp ( {
components : {
'child-component' : Childcomponent
} ,
methods : {
handleEvent ( message ) {
alert ( message) ;
}
}
} ) . mount ( '#app' ) ;
CDNの読み込み
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> で Vue.js 3を読み込みます。
子コンポーネント
ChildComponentはボタンを含んでおり、クリックすると emitEventメソッドが呼ばれ、$emitを使って親コンポーネントにカスタムイベント custom-eventを送信します。
親コンポーネント
handleEventメソッドを使って、子コンポーネントから送信されたイベントを受け取り、そのデータ(この場合は "Hello from child!")を表示します。
このように、$emitを使うことで子コンポーネントから親コンポーネントにイベントとデータを伝えることができます。
Home
HTML
<!-- ~ --> comment
コメント(注釈)を挿入する。
button 要素
ユーザーがクリックすることで何らかのアクションを実行するためのボタンを作成する。
div 要素
一般的なコンテナ
script 要素
Webページに動的な機能や挙動を追加するために使用される、JavaScriptコードを含めるための方法です。
グローバル属性
id 属性
要素を一意に識別するための属性です。同じ識別名はページ内で1回しか使えません。
CSS
JavaScript
alert
警告ダイアログを表示したい。
const
文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
this
実行時に決定される特殊なキーワードです。
Vue.js
シンプルで柔軟な構造を持ち、リアクティブなデータバインディングとコンポーネントベースのアーキテクチャにより、効率的に動的なユーザーインターフェースを構築できるJavaScriptフレームワークです。
CDNの Vue.jsを使用する
components
再利用可能で独立したUIパーツを定義し、アプリケーションのコードを分割して効率的に管理するための仕組みです。
createApp
Vue 3でアプリケーションを初期化し、指定した DOM要素にマウントするための関数です。
methods
コンポーネント内で関数を定義し、テンプレートからイベントなどを通じて動作を実行するための仕組みです。
mount
作成した Vueアプリケーションを指定した HTML要素に関連付けて表示するためのものです。
template
コンポーネントの表示内容を定義するための HTML構造です。
@click
HTML要素がクリックされた時に特定のメソッドや処理を実行するためのディレクティブです。
API
PHP
Python
Git