2. 程式人生 > >子組件通過$emit()向父組件傳遞數據

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

阿新 • • 發佈：2019-03-24
oct body 定義 spa key func eth hang app

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

改變子組件輸入框數據，父組件的數據也跟著改變

效果圖：

技術分享圖片

實現代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子組件向父組件傳遞數據</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <child @change="getData"></child>    <!-- @change：父組件監聽子組件發送的change事件-->
            <div>父組件：{{msg}}</div>
        </div>
        <script type="text/javascript">
            
            //
 
定義一個組件
            Vue.component(‘child‘,{
                template: "<div>子組件：<input @keyup=‘handle‘ v-model=‘msg‘ /></div>",
                data: function (){
                    return {
                        msg: ‘‘
                    }
                },
                methods:{
                    handle:
 
function(){
                        this.$emit(‘change‘,this.msg);        //發送change事件，並且傳遞this.msg
                    }
                }
            })
            
            var vm = new Vue({
                el: ‘#app‘,
                data: {
                    msg: ‘‘
                },
                methods:{
                    getData: 
 
function(data){
                        this.msg = data;
                    }
                }
            })
        </script>
    </body>
</html>

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

相關推薦

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

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

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

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

vue組件-#構成組件-父組件向子組件傳遞數據

.com ima 顯式 傳遞 字符串 一個 vue.js vue http 組件對於vue來說非常重要，學習學習了基礎vue後，再回過頭來把組件弄透！ 一、概念 　　組件意味著協同工作，通常父子組件會是這樣的關系：組件 A 在它的模版中使用了組件 B 。 　　它們之間

使用-Prop-傳遞數據（父組件通過 props 向下傳遞數據給子組件）

log ssa nbsp vue.js app charset oct 傳遞數據 spa <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue父組件向子組件傳遞數據

rip pan ext sel name lan obj styles import 父組件 <template> <div id="app"> <v-header :childseller="fatherseller">&

Vue-組件嵌套之 父組件向子組件傳值

總結 點擊 size asc 分享圖片 default component one con 父組件向子組件傳值步驟： 在這裏先定義一下，相對本案例來說：App.vue是父組件，Second-module.vue是子組件。 一、首先，值肯定是定義在父組件中的，供所有子組件

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中父子組件主動獲取值 父組件向子件間的傳值

組件 獲取值 ima 圖片 定義 技術 ref height ops 父組件主動獲取子組件的數據和方法： 1、調用子組件的時候定義一個ref <v-header ref=‘header‘></header> 2、在父組件裏面通過

子組件向父組件傳遞信息

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

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

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

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

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

vue中子組件傳值給父組件

ima bubuko TP vue nbsp 技術分享 技術 組件 src index.js 子組件 父組件 vue中子組件傳值給父組件

[Vue]組件——通過$emit自定義組件事件

component clas ref pre .org http 組件 span 監聽 1.在定義組件時調用內建的 $emit 方法並傳入事件的名字，來向父級組件觸發一個事件enlarge-text： Vue.component(‘blog-post‘, {

vue.js 組件之間傳遞數據

js前言組件是 vue.js 最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數據無法相互引用。如何傳遞數據也成了組件的重要知識點之一。組件組件與組件之間，還存在著不同的關系。父子關系與兄弟關系（不是父子的都暫稱為兄弟吧）。原文作者：林鑫，作者博客：https://github.co

vue組件父子組件之間傳遞數據

head window lan data one logs 傳遞 child utf-8 舉個栗子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

[Doctrine Migrations] 數據庫遷移組件的深入解析三：自定義數據字段類型

con 組件 extends arr TP value ctr ets field 自定義type 根據官方文檔，新建TinyIntType類，集成Type，並重寫getName，getSqlDeclaration，convertToPHPValue，getBindingT

vue引入iframe的父頁面向子頁面傳遞數據

methods win export sid hone pos brush gin second 父頁面 <template> <div> <el-button @click=‘btn(index)‘ :class="{‘

vue學習十(prop傳參、v-bind傳參、$emit向父級傳送訊息、input元件上使用 v-model、事件拋值)

基本示例 元件是可複用的 Vue 例項，且帶有一個名字：在這個例子中是 。我們可以在一個通過 new Vue 建立的 Vue 根例項中，把這個元件作為自定義元素來使用 <div id="components-demo"> <

layUI之DataTable組件V1.0(父子表管理傳值/數據表格與select&laydate結合等)

val 事情 username ren overflow 應該 aid borde elpa 目錄 layUI之DataTable數據表格組件V1.0 概述 一、下載與引用 二、組件功能介紹 三、父表格渲染 四、子表彈出渲染 五、父表增/刪/改/查 六、其他特色功能 七、