非父子元件的資料傳遞

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

複製程式碼可以直接檢視效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    <style type="text/css"></style>
</head>
<body 
>
    <div id="app">
    //定義兩個元件
        <foo></foo>
        <bar></bar>
    </div>
    <script type="text/javascript">
    var bus = new Vue()
    var foo = {
        render: function(creatElement){
            return creatElement(
                'button',{
                    on:{
                        click:this 
.addBar
                    }
                //設定預設值為count
                },this.count
            )
        },
        //這裡data必須為函式就不多說了
        data: function(){
            return {
                count: 0,
            }
        },
        methods: {
            addBar: function(){
                //執行incrementBar事件，注意是事件，不是方法，因為Vue中可以自定義事件 

                bus.$emit("incrementBar")
            }
        },
        mounted: function(){
            //在鉤子函式中註冊事件，注意這裡一定要使用var _this=this。因為這裡的this是例項化的物件，而裡面的this是註冊事件中的上下文
            var _this = this
            bus.$on('incrementFoo',function(id){
                _this.count++
            })
        }
    }
    var bar = {
        render: function(creatElement){
            return creatElement(
                'button',{
                    on:{
                        click: this.addFoo
                    }
                },this.count
            )
        },
        data: function(){
            return {
                count: 0
            }
        },
        methods: {
            addFoo: function(){
                bus.$emit("incrementFoo")
            }
        },
        mounted: function(){
            var _this = this
            bus.$on('incrementBar',function(){
                    _this.count++
                })
            }
    }
    var app = new Vue({
        el: "#app",
        data: {
            count: 0,
        },
        methods: {

        },
        components: {
            'foo': foo,
            'bar':bar
        }
    })
    </script>
</body>
</html>

自學vue 之使用axios獲取ajax資料請求和首頁父子元件資料傳遞部分筆記

使用axios獲取ajax資料請求：首先還是線上建立分支 git pull 拉到本地，並 git checkout index-ajax 切換到該分支，執行命令 npm install axios -- save 安裝 axios 依賴包，在首頁home.v

vue父子元件資料傳遞方式

父元件向子元件傳值父元件向子元件傳值簡單，直接在父元件中引用子元件時將資料繫結在子元件中，並在子元件的props屬性中接收即可。以下是父元件，其中<keep-alive>標籤表示子元件，將created階段獲取的值singerData儲存到v

非父子元件的資料傳遞

複製程式碼可以直接檢視效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

Vue元件--非父子元件間的通訊

父子元件的通訊已經知道了，但是在實際的專案中如果需要拿到兄弟元件上的資料（非父子）那該如何是好呢? 其實Vue已經為我們提供了一套解決方案：使用中央事件匯流排；非父子元件間的通訊，使用一個空的Vue例項來作為中央事件匯流排（就相當於中介一樣），用它來丟擲和監聽事件 &nbs

Vue 非父子元件間傳值

非父子元件（隔多代、兄弟等）之間傳值，主要有兩種方式： - vuex - 釋出訂閱模式(在 vue 中稱為匯流排機制) 下文將介紹通過匯流排機制（Bus/匯流排／釋出訂閱模式／觀察者模式），解決非父子元件之間的傳值。 <div id="root"&

vue非父子元件間的傳值 Bus/匯流排機制/釋出訂閱模式/觀察者模式

Bus/匯流排機制/釋出訂閱模式/觀察者模式我們需要將一個元件的子元件的資料傳遞給另一個元件的子元件 ① 將Vue的例項賦值給Vue.prototype.bus，這樣只要我們之後呼叫new Vue()或者建立元件的時候，每一個元件上都會有Bus這個屬性，因為每一個元件或者Vue這個例項

vue非父子元件傳值之釋出訂閱模式

vue非父子元件傳值之釋出訂閱模式目前瞭解的元件傳值的幾種方式 props 再熟悉不過了 vuex 也比較常用 evenbus 釋出訂閱主要說一下發布訂閱 Vue.prototype.bus = new Vue();

父子元件資訊傳遞

父元件資訊傳遞給子元件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script

Vue學習(8)————————父子元件傳值，父元件主動獲取子元件數值方法，子元件主動獲取父元件各項，非父子元件傳值

在父元件的引用標籤裡加入冒號屬性 <template> <div>  <v-header :title="title"></v-header> <h1>新聞

Vue的三種常用傳值方式、父傳子、子傳父、非父子元件傳值

Vue常用的三種傳值方式有：1.父傳子 2.子傳父 3.非父子傳值父子元件的關係可以總結為 prop 向下傳遞，事件向上傳遞。父元件通過 prop 給子元件下發資料，子元件通過事件給父元件傳送訊息。 1. 父元件向子元件進行傳值父元件: <temp

Vue2.0的三種常用傳值方式、父傳子、子傳父、非父子元件傳值

在Vue的框架開發的專案過程中，經常會用到元件來管理不同的功能，有一些公共的元件會被提取出來。這時必然會產生一些疑問和需求？比如一個元件呼叫另一個元件作為自己的子元件，那麼我們如何進行給子元件進行傳值呢？如果是電商網站系統的開發，還會涉及到購物車的選項，這時候就會涉及到非父子元件傳值的情況。當然你也可以

Vue中的父子元件通訊以及使用sync同步父子元件資料

目錄正文前言：之前寫過一篇文章《在不同場景下Vue元件間的資料交流》，但現在來看，其中關於“父子元件通訊”的介紹仍有諸多缺漏或者不當之處，正好這幾天學習了關於用sync修飾符做父子元件資料雙向繫結的的用法，於是決定寫一篇文章，再次總結下“Vue中的父

vue非父子元件之間傳值

記錄第一次做專案遇到的坑，可能說的有所欠缺，但是功能是實現的。為了實現頭部的搜尋框，搜尋table表格中的資料，因為是兩個頁面，所以需要元件傳值。首先，main.js中建立事件中心eventHub new Vue({ el: '#app',

Vue非父子元件傳值

假如我們有兩個子元件：Blog.vue 和News.vue 它們同為兄弟元件我想實現News元件資料傳遞給Blog元件，步驟如下： 1、建立一個js檔案：VueEvent.js 程式碼如下： import Vue from 'vue'; var VueEvent=new Vue();

Vue之非父子元件的通訊

新建一個VueEvent.js，建立一個Vue例項充當中間傳輸媒介 //1.引入Vue import Vue from 'vue' //2.例項化一個Vue物件 var VueEvent = new V

篇三、元件通訊（非父子元件間傳值 Vuex ~ 狀態管理）

Vuex用法 vuex主要使用場景為大型單頁面應用，更適合多人協同開發。 vuex寫法多種，在此只寫兩種自認為最常用方案。步驟一：vuex安裝、全域性引入利用npm包管理工具安裝，命令列如下（注：在開發環境中安裝vuex時，需要加--

vue事件發射與接收(可實現頁面傳值和非父子元件傳值)

vue2.0中可以使用 $emit, $on, $off 分別來分發、監聽、取消監聽事件。 1).給data新增一個名字為eventhub 的空vue物件,就可以在任何元件都可以呼叫事件發射接收的方法了，在main.js中新增： new Vue({ el: '#app', &

vue中的event bus非父子元件通訊

有時候非父子關係的元件也需要通訊。在簡單的場景下，使用一個空的Vue例項作為中央事件匯流排：有時候非父子關係的元件也需要通訊。在簡單的場景下，使用一個空的 Vue 例項作為中央事件匯流排： var bus = new Vue() // 觸發元件 A 中的事件bu

vue -- 非父子元件傳值，事件匯流排（eventbus）的使用方式

轉自：https://blog.csdn.net/wxl1555/article/details/84646832 一、前言先說一下什麼是事件匯流排，其實就是訂閱釋出者模式；比如有一個bus物件，這個物件上有兩個方法，一個是on（監聽，也就是訂閱），一個是emit（觸發，也

vue2.X基礎知識五之非父子元件通訊

在實際業務中，除了父子元件通訊外，還有很多非父子元件通訊的場景，非父子元件一般有兩種，兄弟元件和跨多級元件。1、中央事件匯流排(bus)處理任何元件通訊在vue2.x中推薦使用一個空的Vue例項作為中央事件匯流排(bus)，也就是一箇中介。例如：<div id=

非父子元件的資料傳遞

相關推薦