Vue2 框架整理：子元件向父元件傳遞資料，$emit() 或 v-on

阿新 • • 發佈：2019-02-16

這裡寫圖片描述

當子元件向父元件傳遞資料的時候，需要的是自定義事件： $on & $emit

子元件用$emit()觸發事件，父元件用$on() 監聽子元件的事件

或者父元件也可以直接在子元件的自定義標籤上使用v-on來監聽子元件觸發的自定義事件：

$emit() 中第一個引數是方法的名稱，後面都是根據需求設定要傳遞的資料

比如：（下面所有 v-on 簡寫為語法糖@）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title 
>Title</title>
    <style>
        #v1{
            display: none;
            width:200px;
            margin: 100px;
            border: 2px solid #faf;
        }
    </style>
</head>
<body>

<div id="v1">

    <v-component @add="sum" @reduce="sum"></v-component 
>

    <p>計算結果：{{ total }}</p>

</div>


<script src="vue.min.js"></script>
<script>
    window.onload=function () {
        document.getElementById("v1").style.display="block";
    };

    Vue.component('v-component',{
        template:'<div>'+
                    '<button @click="comPlus">點我加一</button> ' 
+
                    '<button @click="comMinus">點我減一</button>'+
                  '</div>',
        data:function () {
            return{
                num:0
            }
        },
        methods:{
            comPlus:function () {
                this.num++;
                this.$emit('add',this.num);
            },
            comMinus:function () {
                this.num--;
                this.$emit('reduce',this.num);
            }
        }
    });

    var app=new Vue({
        el:"#v1",
        data:{
            total:0
        },
        methods:{
            sum:function (total) {
                this.total=total;
            }
        }
    })
</script>

</body>
</html>

實現效果：
這裡寫圖片描述

Vue2 框架整理：子元件向父元件傳遞資料，$emit() 或 v-on

當子元件向父元件傳遞資料的時候，需要的是自定義事件： $on & $emit 子元件用$emit()觸發事件，父元件用$on() 監聽子元件的事件或者父元件也可以直接在子元件的自定義標籤上使用v-on來監聽子元件觸發的自定義事件： $e

artDialog實現子視窗向父元素傳遞資料

案例：在頁面A點選按鈕，彈出artDialog視窗B，當關閉視窗B時，實現向父元素A傳遞資料。一、方法一： 1、利用artdialog中的data方法進行傳值與接收值。在子視窗呼叫：artDialog

vue學習（四）：子元件向父元件傳參

子元件向父元件傳參主要依靠 v-on 和 $.emit 這個是vue官網上給的方法呼叫，我們看看頁面上怎麼使用。子元件 main_Header.vue <template> <div> <div>{{count}}</

React筆記（二）：子元件向父元件傳值

通過回撥函式在父元件中定義好state和處理state的回撥函式，在子元件中通過this.props獲取函式的名稱，然後在子元件中向函式傳入改變的state 父元件： class BrowserPerformance extends Compon

子元件向父元件傳值(事件發生在子元件中)和事件

專案中一個功能可能在很多地方都有出現那麼此時我們肯定是要抽成一個元件, 如果此功能中需要傳值呢我覺得子元件向父元件傳值, 父元件呼叫子元件裡面的事件, 父元件向子元件傳值云云…. 前兩者真的是需要仔細點琢磨專案有個需求: 需要對編號:中的值進行純數字驗證並且進行搜尋,

子元件向父元件傳值 --呼叫父的無參方法【必看】

我上次寫過一篇關於父元件向子元件傳值參考地址為：https://blog.csdn.net/weixin_43814195/article/details/84892753 所以今天我在寫一篇關於子元件向父元件傳值的文章首先，子元件是無法直接改變父元件的資料的，只能通過父元件改

子元件向父元件傳值--呼叫父元件的有參方法【必看】

咳咳，我來啦，今天我來補充一下，說一下Vue的子元件向父元件傳值的呼叫父元件的有參方法想要父元件呼叫無參的方法參考地址為：https://blog.csdn.net/weixin_43814195/article/details/84899700 話不多說，上程式碼！！啦

Vue.js子元件向父元件通訊

一、場景描述：曾經有個電商專案，其中有個“老帶新”模組，而且該模組新增的入口很多，但是新增後展示效果還不一樣，當時就考慮將新增的元件單獨拿出來，其實就是一個子元件向父組同步資料的過程。當然，背景不重要了，關鍵是看實現的方式。二、場景展示效果（PS：展示效果請忽略美感）

Vue筆記——子元件向父元件傳遞資料

Vue專案中經常使用到元件之間的數值傳遞，實現的方法很多，但是原理基本上大同小異。子元件向父元件出傳遞資料，使用自定義事件的方式。父元件向子元件傳遞資料，使用props屬性的方式。一、在子元件中自定義事件我們可以從子元件中想父元件中傳遞多個數據，在子

react 子元件向父元件傳值簡單示例

父元件 data即為要向子元件 ExpressionTree 元件傳遞的值，子元件 node.props.title，就相當於this.props.title，onSelect api 的理解請參考 ant design 元件的樹選擇元件

vue 子元件向父元件傳遞資訊

1.要引入vue,js <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Vue2.0中子元件向父元件傳遞資料的方法，以完整demo演示

子元件child.vue原始碼：<template> <div class="child"> <button @click="sendData">點擊向父元件傳資料</button> </div> &

子元件向父元件傳值和父元件向子元件傳值

父元件向子元件傳值成功總結如下：子元件在props中建立一個屬性，用以接收父元件傳過來的值父元件中註冊子元件在子元件標籤中新增子元件props中建立的屬性把需要傳給子元件的值賦值給該屬性1.在子元件中建立一個按鈕，給按鈕繫結一個點選事件2.在響

vue-子元件向父元件傳值

子元件註冊觸發事件，父元件註冊觸發子元件事件後的方法寫在method裡面父元件這麼寫 <component-a v-on:child-say="listenToMyBoy"><

vue.js中關於$emit(eventName, optionalPayload) 觸發事件的應用，子元件向父元件傳遞資料（字串，陣列，或者物件等）

一、父元件及程式碼解釋：<template> <div> <p v-for="msg in messages">{{msg}}</p>

vue子元件向父元件傳值----$emit

子元件向父元件傳值可以使用 $emit() 我的理解是子元件通過$emit方法把自己的第一個引數eventName傳遞給父級，父級把eventName當成一個事件，觸發這個事件接收子級傳給自己的資料或執行操作 $emit ( eventName,args..) 引

React 的資料流動（反向由子元件向父元件傳遞資料）

在React中，資料都大體上都是單向資料流動的，由父節點傳到子節點，子元件都是通過Props從父元件那裡獲取資料，這樣的話，如果很多子元件用了資料只需要改變父元件的資料子元件的資料都會發生改變reac

子元件向父元件傳值，父元件向子元件傳值

子->父例如：子向父傳遞flag 在子元件中想要傳出的的dom元素中新增事件 @click=”sendFlag”; 在vue的methods定義方法 sendFlag(){ let flag=this.flag; this.

react子元件向父元件傳遞資料例項

這個例子很簡單，看一下就懂： class Son extends React.Component { render() { return <input onChange={thi

子元件向父元件通訊的兩種方式

方法一：$emit 子元件 methods:{ onClickMe:function (){ this.$emit('functionName'，Data) } //functionName為父元件裡要繫結的方法，data為向父元件傳遞的資料

Vue2 框架整理：子元件向父元件傳遞資料，$emit() 或 v-on

當子元件向父元件傳遞資料的時候，需要的是自定義事件： $on & $emit

相關推薦