Vue中父子組件間的通信

這篇文章主要介紹了關於Vue中父子組件間的通信，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

Vue. js是一套建構使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 從根本上採用最小成本、漸進增量的設計。 Vue 的核心庫只專注於視圖層，並且很容易與其他第三方程式庫或現有專案整合。另一方面，當與單一文件元件和 Vue 生態系統支援的程式庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供有力驅動。

一、運行環境建置

Vue引入方式一般有三種：

第一種CDN引入

<script></script>

第二種使用NPM 安裝

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

第三種搭建鷹架CLI
所謂腳手架是透過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，就出現下面的頁面，標誌著鷹架搭建完成了。

二、介紹SRC檔案流程及根元件App

「鷹架搭建完成後，project裡面各個資料夾及文件，如下圖：

1.src檔案流程介紹

index.html(入口檔案)=>main.js=>App.vue（根元件），根元件中模板內容就直接插入入口文件中#app處，然後再將頁面呈現出來。

2.根元件App介紹

主要由三個部分組成，分別為範本（html結構），行為（處理邏輯）和樣式（解決樣式）

三、vue元件巢狀

vue元件巢狀是指寫好的子元件如何與根元件取得關聯，通常可以分成元件全域定義與元件局部定義，後者比較常見。

1.元件全域定義

一般以下兩個步驟：

①main.js引入子元件

②App.vue元件中template呼叫

//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.元件局部定義

#一般以下三個步驟：

①import引入子元件

②export default註冊子元件

③template模板中加入子元件

四、父元件向子元件傳值

接下來我們透過一個例子，說明父元件如何向子組件傳遞值：在子組件Users.vue中如何取得父組件App.vue中的資料users:["Henry","Bucky","Emily"]

1.建立子組件，在src/components/資料夾下新建一個Users.vue子元件

2.在App.vue中註冊Users.vue元件，並在template中加入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的屬性

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

五、子元件向父元件傳值（透過事件形式）

接下來我們透過一個例子，說明子元件如何向父元件傳遞值：
當我們點擊“Vue.js Demo”後，子元件向父元件傳遞值，文字由原來的“傳遞的是一個值”變成“子傳送值給父元件” ，實作子元件向父元件值的傳遞。

1.在子元件（header元件）中文字部分綁定一個點擊事件

<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.在父元件（App根元件）中的子標籤中監聽該自訂事件並新增一個回應該事件的處理方法

<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>

六、總結

在通訊中，無論是子元件向父元件傳值或是父元件向子元件傳值，他們都有一個共同點就是都有中間介質，子向父的介質是自訂事件，父向子的介質是props中的屬性。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

使用c v讓vue返回頂部元件

深入理解Node的HTTP核心模組

以上是Vue中父子組件間的通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！