2. 程式人生 > >組件傳值-子組件通過事件調用向父組件傳值

組件傳值-子組件通過事件調用向父組件傳值

阿新 • • 發佈：2019-03-02
通過 .data app 方法 按鈕 sca input func body


<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./js/vue-2.4.0.js"></script> </head>
<body> <div id="app"> <!-- 父組件向子組件傳遞方法，使用的是 事件綁定機制：v-on ,當我們自定義了一個事件屬性之後，那麽子組件就能夠，通過某些方式，來調用傳遞進去的這個方法了 --> <com2 @func="show"></com2> </div> <template id="tmpl"> <div> <h1>這是子組件</h1> <input type="button" value="這是子組件中的按鈕，點擊它，觸發父組件傳遞過來的 func 方法" @click="myclick"> </div> </template>
<script> //定義了一個字面量類型的 組件模板對象 var com2={ template:‘#tmpl‘,//通過指定了一個ID 表示說，要去加載 這個指定ID 的template 元素中的內容，當做 組件的HTML 結構 data(){ return{ sonmsg:{name:‘小頭兒子‘,age:6} } }, methods:{ myclick(){ //當點擊子組件的按鈕的時候，如何拿到父組件傳遞過來的 func 方法，並調用這個方法？ //emit 英文原意：觸發，調用，發射的意思 //this.$emit(‘func123‘,123,456) this.$emit(‘func‘,this.sonmsg) } } } //創建 Vue 實例，得到 ViewModel var vm=new Vue({ el:‘#app‘, data:{ datamsgFormSon:null }, methods:{ show(data){ //console.log(‘調用了父組件身上的 show 方法：---‘+data) //console.log(data): this.datamsgFormSon=data } }, components:{ com2 } }) </script> </body> </html>

組件傳值-子組件通過事件調用向父組件傳值

相關推薦

組件傳值-子組件通過事件調用向父組件傳值

通過 .data app 方法 按鈕 sca input func body <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue 子組件向父組件傳值

data cti list ike words eth com dword on() 父組件這麽寫 <component-a v-on:child-say="listenToMyBoy"></component-a> <p>

子組件向父組件傳值

ets hang str value ons parse ood color home 子向父傳值：//子組件像父組件傳值的本質就是， 父向子傳遞方法，子調用這個方法， 同時把 數據當作參數 傳遞給這個方法父組件：GoodsInfo.vue 子組件：goodsinfo_nu

vue 和react中子組件分別如何向父組件傳值

AC ssa 傳值 received message methods std 狀態 route vue子組件和父組件雙向傳值： 子： Vue.component("childComponent",{ template:`<div><p @clic

子組件通過$emit()向父組件傳遞數據

oct body 定義 spa key func eth hang app 子組件通過$emit()向父組件傳遞數據 改變子組件輸入框數據，父組件的數據也跟著改變 效果圖： 實現代碼： <!DOCTYPE html> <html&g

vue 子父組件之間的通信，及在調用組件的地方

效果 sta min con emit hand icon arr pre 這裏是用了 element ui 你們也可以看一下管方的文檔 http://element.eleme.io/#/zh-CN/component/installation 組件html <di

子組件向父組件傳遞信息

bsp 行操作 data .org 題集 內容 csdn nbsp 組件 ---恢復內容開始--- 子組件向父組件傳遞信息：https://blog.csdn.net/qq_40352733/article/details/79547896 方式一： 父on()綁定,子on

vue 實現，子組件向父組件 傳遞數據

borde 個數 const pre 單擊 == code 接受 port 首先理清組件之間的關系 組件與組件之間，還存在著不同的關系。父子關系與兄弟關系（不是父子的都暫稱為兄弟吧）。 父子組件 父子關系即是組件 A 在它的模板中使用了組件 B，那麽

10-Linux基礎入門（八）-文件和目錄的屬性及權限之用戶與組和時間戳基礎

log 信息 p s center 新浪 shell 使用 自己的 用戶配置 一、概述Linux是一個多用戶、多任務的操作系統，對於Linux系統來說，由於角色不同，權限和所完成的任務也不同。用戶的角色是通過UID和GID識別的，用戶的UID就相當於我們的身份證一樣，用戶名

init.rc文件中面啟動c++程序，通過jni調用java實現

mini val sni ril urn runtime sport mco env </pre><p>註：假設是自己的myself.jar包，還要修改例如以下：</p><p>target/product/core_bas

Electron 調用系統Office軟件

ron electron pan ocx lec shell. 文件 cnblogs 空白 通過打開本地空白文件的方式從而打開Office辦公軟件 const shell = require(‘electron‘).shell; const path = require(

java中調用kettle轉換文件

post sso sna 命名 exce content tro 沒有 bsp java中調用kettle轉換文件 通過命令行也能夠調用，然後java中調用命令行代碼也能夠。這樣沒有和java代碼邏輯無縫集成。本文說明kettle5.1中假設通過

數組作為參數傳遞的時候，被調用的函數內無法計算出數組的大小

數組 bsp return images 傳遞 方法 %d alt span 1 #include <stdio.h> 2 #include <stdlib.h> 3 int ff (int c[])//被調用的函數 4 { 5

C#中怎麽用process調用一個exe文件並傳入參數?

[1] s參數 div tex 入參 orm ring gpo 轉換 System.Diagnostics.Process.Start("程序的路徑", "參數1 參數2");第一個參數是aaa.exe 的路徑，第二個參數是用空格分開的兩個參數組成的字符串。aaa.exe中

Adobe出品（支持IOS，android，web調用）免費插件編輯圖片

public 第三方 injection inject out ntb version 顯示 themes <head runat="server"><meta http-equiv="Content-Type" content="text/html; c

模塊導入---如何在一個文件中導入其它模塊，來調用它的變量、函數等，以節省代碼量

聲明定義 工作量 .info pub 一個 模塊 int bsp pre ***我們在開發過程中，經常會遇到一些公共的變量或者方法，如果在每個文件中聲明定義，則會造成工作量重復。我們可以將我們會重復使用的方法和變量放在一個文件中，要用的時候去調用就可以了。 #簡例： 1.新

IDEA 的 properties 文件的屬性字段如何鏈接到調用的文件

文件 pla dea 技術分享 選擇 src bsp mage all 想要達到的效果： ctrl + 鼠標點擊：彈出如下所有使用的文件 問題： 　　有些 IDEA 使用 ctrl + 鼠標點擊不能看到使用的文件。 解決辦法： ctrl + 鼠標點擊，然後選擇設置按鈕

調用外部EXE文件

result dia har () edi div 技術分享 技術 .exe 實現效果: 　　 知識運用： 　　Process類的Start方法 實現代碼： private void button1_Click(object sender, EventAr

通過iframe的頁面改變父頁面標籤的值

在頁面A中使用了內聯框架iframe，當點選A頁面中的跳轉連結後iframe中的內容（頁面B）改變並同時改變頁面A中的某個標籤值 如下： <script type="text/javascript"> $(document).ready(function(){

php 通過ssh2協議用sftp實現檔案上傳、下載

伺服器的連線 $connection=ssh2_connect($host, $port); if( ssh2_auth_pubkey_file($connection, $send_account,