値によっていくつかの簡単なVUE

値によってアセンブリの方法:

 

サブアセンブリする親コンポーネントのデータ転送(小道具)

1:親コンポーネントが導入されるべきサブアセンブリ

輸入 nav2Children  から 「./nav2Children.vue」

輸入 zjOne  から 「./public/zjOne.vue」

コンポーネントを導入する:成分:{ 'nav2C':nav2Children、 'zjOne'} zjOne

変数の定義:コンテンツ:{}、タイトル: ""、

書き込みのHTML部分:

 

2:サブアセンブリを受ける小道具データ(対応するために必要なタイプの変数が受信されることに注意してください)

小道具:{ 'データ':オブジェクト、 タイトル:文字列}

console.log(データ)/console.log(タイトル)

第二に、データは、親サブアセンブリ構成要素(主に親コンポーネントに渡されたイベントデータを介してサブアセンブリ)に送信されます

サブコンポーネント部品:

<ボタン@クリック= "GOBACK">子组に父组</ボタン>

まず、GOBACKを呼び出すためにクリックイベントで、メソッドのGOBACKを宣言

GOBACK:関数(){

 この。$( 'transferTitle' を、this.title)放出

}

GOBACKで$ transferTitleイベントを横断し、this.title返すために発するを使用して

トランジットに似たカスタム関数であるTransferTitleイベントは、this.titleは、このイベントを通じて親コンポーネントに渡されます

サブコンポーネント部品:

ここでは、単にとして書かれたことができます:@ transferTitle =「活性化」

親コンポーネントで、呼び出しは、方法transferTitleイベントを活性化パラメータタイトル上にサブアセンブリから転送された取得するために、この方法は、活性化された宣言

//受信値送信サブアセンブリ

活性化:機能(データ){

      console.log(データ)。

      this.name =データ。

}、

2つの方法で三、VUEの質量差パラメータparamsルーティングおよびクエリ

ページ伝統的な価値観:ルータ・リンク・フレーム、またはクエリのparamsにより、

 

注:違いは、paramsは名のみルートを導入するために使用することができるので、二つ以上の書き込みは、paramsは、クエリのみによって第二、このような方法は、最初のクエリであってもよいことができることです

この。$のrouter.push({   

    名前: "nav1Children"、   

    paramsは:{にuserId: 'formV' コード:10011}

 });

ページの受信値:

(1)この$ router.currentRoute.query.userId。

(2)この$ route.query.userId。

(3)この$ route.params.userId。

これは、ここで注意しなければならない:.この$ router.currentRouteは、この$ルートに相当。

違いを表示します:

クエリ:

params:

Ajaxのクエリが言った後、ブラウザのアドレスバーに表示されるだけで、元のパラメータ、我々は大量参加で得るものと似ているポストに似てparamsは、そして、後者は表示されません

第四に、クロス見開き値も上記のようにクエリまたはのlocalStorage、クエリを使用しています

localStorageは、上のウィンドウです。だから、this.localStorageを書く必要が、これはあなたがここにVUEのインスタンスを意味しません。

オプション1、

存储:localStorage.data = JSON.stringify(data.body.data)。

获取:JSON.parse(localStorage.data);

方案二、

存储:localStorage.setItem('data',JSON.stringify(data.body.data));

获取:JSON.parse(localStorage.getItem('data'));

五、组件与组件之间的传值还有一种方法event bus

这里来看一个简单的例子:

比如,我们这里有三个组件,main.vue、click.vue、show.vue。click和show是父组件main下的兄弟组件,而且click是通过v-for在父组件中遍历在了多个列表项中。这里要实现,click组件中触发点击事件后,由show组件将点击的是哪个dom元素console出来。

首先,我们给click组件添加点击事件

<div class="click" @click.stop.prevent="doClick($event)"></div>

首先创建出我们的eventBus,我们把它命名为bus.js

import Vue from 'vue';

export default new Vue();

这样我们就创建了一个新的vue实例。接下来我们在click组件和show组件中import它。

import Bus from 'common/js/bus.js';

接下来,我们在doClick方法中,来触发一个事件:

doClick(event) {

    Bus.$emit('getTarget', event.target);

}

这里我们在click组件中每次点击,都会在bus中触发这个名为'getTarget'的事件,并将点击事件的event.target顺着事件传递出去。

接着,我们要在show组件中的created()钩子中调用bus监听这个事件,并接收参数:

Bus.$on('getTarget', target => {

    console.log(target);

});

这样,在每次click组件的点击事件中,就会把event.target传递到show中,并console出来。

所以eventBus的使用还是非常便捷的,但是如果是中大型项目,通信比较复杂,还是建议大家直接使用vuex。

六、子组件向子组件传递数据

Vue 没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件。如果一定需要子对子传参,可以先从传到父组件,再传到子组件。

おすすめ

転載: www.cnblogs.com/wangtong111/p/11259546.html