Vue の親コンポーネントと子コンポーネント間の通信-jsチュートリアル-php.cn

Vue の親コンポーネントと子コンポーネント間の通信

不言

リリース： 2018-07-13 17:22:55

オリジナル

1511 人が閲覧しました

この記事では、主に Vue の親コンポーネントと子コンポーネント間の通信について説明します。必要な友人はそれを参照できるように共有します。

ユーザーインターフェイスの構築。他の重量級フレームワークとは異なり、Vue は基本的に最小コストの増分設計を採用しています。 Vue のコアライブラリはビューレイヤーのみに焦点を当てており、他のサードパーティライブラリや既存のプロジェクトと簡単に統合できます。一方で、Vue は、Vue エコシステムでサポートされている単一ファイルコンポーネントやライブラリと組み合わせることで、複雑な単一ページアプリケーションを実行することもできます。

1. 動作環境の構築

Vueの導入方法は大きく分けて3つあります

1つ目はCDN導入

<script></script>

ログイン後にコピー

2つ目はNPMを使ってインストールする

$ npm install vue//安装最新稳定版

ログイン後にコピー

3つ目はビルドする方法ですScaffolding CLI
いわゆるScaffoldingは、webpackによって構築された開発環境であり、大規模なシングルページアプリケーションを迅速に構築するために使用されます。最新のフロントエンド開発ワークフローに耐久性と強力なインフラストラクチャを提供します。わずか数分で、ホットリロード、保存時のコードチェック、運用準備が整ったビルド構成を使用してプロジェクトを起動して実行できます。最初にnode.jsをインストールする必要があります。Node.jsにはバージョン0.6.3以降npmが組み込まれているため、node.jsのインストール後にnpmもインストールされます。次に、git bash を通じて次のコマンドラインを操作します:

$ node -v//检查是否已经装好了node
$ npm -v//检查是否已经装好了npm
$ npm install --global vue-cli //安装 vue-cli
$ vue init webpack project//进入目标文件夹创建一个新项目
$ cd project//进入新项目
$ npm install//安装package.json中依赖的node_modules
$ npm run dev//运行该项目

ログイン後にコピー

本土ユーザーの場合、npm レジストリソースを国内ミラーに設定することをお勧めします。これにより、インストール速度が大幅に向上します。このタイプの設置足場をお勧めします。

npm config set registry https://registry.npm.taobao.org//配置淘宝镜像
npm config get registry//验证是否成功
npm install -g cnpm --registry=https://registry.npm.taobao.org//安装cnpm
cnpm install -g vue-cli//cnpm安装脚手架
vue init webpack my-project
cd my-project
cnpm install
cnpm run dev

ログイン後にコピー

最後に http://localhost:8080 を開くと、以下のページが表示され、足場が完成しました。

Vue の親コンポーネントと子コンポーネント間の通信

2. SRCファイルプロセスとルートコンポーネントアプリの紹介

スキャフォールディングが完了すると、プロジェクト内の各フォルダーとファイルは以下のようになります:

Vue の親コンポーネントと子コンポーネント間の通信

1. srcファイルプロセスの紹介

index .html (エントリファイル)=>main.js=>App.vue (ルートコンポーネント) では、ルートコンポーネントのテンプレートコンテンツが #app のエントリファイルに直接挿入され、ページが表示されます。

2. ルートコンポーネントアプリの紹介

主に、テンプレート(HTML構造)、動作(処理ロジック)、スタイル(解決スタイル)の3つの部分で構成されます

vue コンポーネントネストとは、作成されたサブコンポーネントがルートコンポーネントにどのように関連付けられるかを指します。通常、コンポーネントのグローバル定義とコンポーネントのローカル定義に分けることができ、後者の方が一般的です。

1. コンポーネントのグローバル定義

一般的には次の 2 つの手順です:

① Main.js がサブコンポーネントを導入します

② App.vue コンポーネント内のテンプレート呼び出し

//main.js
import Vue from 'vue'
import App from './App'
import Users from "./components/Users";//引入子组件Users
Vue.config.productionTip = false
Vue.component("users",Users);//自定义名字便于App.vue组件调用，后者为组件名
new Vue({
  el: '#app',
  components: { App },
  template: '<app></app>'
})

ログイン後にコピー

//App.vue组件
<template>
  <p>
   <users></users>//在这里调用，自定义名字是小写的
  </p>
</template>

ログイン後にコピー

2. コンポーネントのローカル定義

次の 3 つの手順:

①インポートでサブコンポーネントを導入します

②デフォルトで登録されているサブコンポーネントをエクスポートします

③テンプレートテンプレートにサブコンポーネントを追加します

4. 親コンポーネントがサブコンポーネントに値を渡します Vue の親コンポーネントと子コンポーネント間の通信

次に、例を使用して、親コンポーネントがサブコンポーネントに値を転送する方法を説明します。値の受け渡し: サブコンポーネント Users.vue 内の親コンポーネント App.vue のデータを取得する方法 users:["Henry","Bucky" ","Emily"]

1. src/components/ フォルダーにサブコンポーネントを作成します

の下に新しい Users.vue サブコンポーネントを作成します2. App.vue に Users.vue コンポーネントを登録し、users タグを追加しますテンプレートに

//App.vue父组件
<template>
  <p>
    <users></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </p>
</template>
<script>
import Users from "./components/Users"
export default {
  name: &#39;App&#39;,
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}</script>

ログイン後にコピー

3. Users.vue で props を作成し、ユーザー属性を作成します

//users子组件
<template>
  <p>
    </p>
<ul>
      <li>{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  
</template>
<script>
export default {
  name: &#39;HelloWorld&#39;,
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

ログイン後にコピー

5. サブコンポーネントが (イベントを通じて) 親コンポーネントに値を渡します

次に、例を使用してサブコンポーネントがどのように渡されるかを説明します。親コンポーネントに値を渡す:

「Vue.js デモ」をクリックすると、サブコンポーネント親コンポーネントが値を渡すと、テキストが元の「値が渡される」から「子が親コンポーネントに値を渡す」に変わります。子コンポーネントから親コンポーネントへの値の転送を実現します。

1. サブコンポーネント（ヘッダーコンポーネント）のテキスト部分にクリックイベントをバインドします Vue の親コンポーネントと子コンポーネント間の通信


<script></script>

ログイン後にコピー

2. サブコンポーネント内のクリックイベントに応答する関数で $emit を使用して、カスタムイベントをトリガーしますイベントを取得してパラメータを渡す

<script>
export default {
  name: &#39;app-header&#39;,
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>

ログイン後にコピー

3. 親コンポーネント(アプリルートコンポーネント)の子タグでカスタムイベントをリッスンし、イベントに応答する処理メソッドを追加

<template>
  <p>
    <app-header></app-header>//与子组件titleChanged自定义事件保持一致，updateTitle($event)接受传递过来的文字
    </p>
<h2>{{title}}</h2>
  
</template>
<script>
import Header from "./components/Header"
export default {
  name: &#39;App&#39;,
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

ログイン後にコピー

6. まとめ