詳解Vue之父子組件傳值

2019-11-19 11:54:39

字體：大中小

來源：轉載

供稿：網友

一、簡要介紹

父子組件之間的傳值主要有三種：傳遞數值、傳遞方法、傳遞對象，主要是靠子組件的 props 屬性來接收傳值，下面分別介紹：

（一）傳遞數值

1.子組件：Header.vue

<template> <div>  <!-- data對象里并沒有 msg 屬性，這里調用的是父類傳遞過來的 msg 屬性 -->  <h2>{{msg}}</h2> </div></template><script>export default { data() {  return {  } }, methods: { }, // 接收父類的傳值 props: ['msg']}</script>

可以看到，在子組件中的data對象里并沒有 msg 屬性，這里調用的是父類傳遞過來的 msg 屬性，接收就是靠 props: ['msg']。

2.父組件Home.vue

<template> <div>  <!-- 2.使用子組件，并向子組件傳值 -->  <v-head :msg="msg"></v-head>  <br>  <br> </div></template><script>// 1.引入子組件import Head from './Head.vue';export default { data() {  return {   msg: '我是一個組件'  } }, methods: { }, components: {  "v-head": Head }, // 頁面刷新時請求數據 mounted() { }}</script>

傳值的核心思想就是，在使用子組件的地方，加上要傳遞的值:<v-head :msg="msg"></v-head>

（二）傳遞方法

傳遞方法的寫法和傳遞數值一樣，下面只寫出關鍵步驟：

父組件

<template> <div>  <!-- 2.使用子組件，并向子組件傳值 -->  <v-head :run="run"></v-head>  <br>  <br> </div></template><script>// 1.引入子組件import Head from './Head.vue';export default { data() {  return {   msg: '我是一個組件'  } }, methods: {  run() {   alert(this.msg);  } }, components: {  "v-head": Head }, // 頁面刷新時請求數據 mounted() { }}</script>

子組件

<template> <div>  <button @click="run">接收父組件的方法</button> </div></template><script>export default { data() {  return {  } }, methods: { }, // 接收父類的傳值 props: ['run']}</script>

（三）傳遞對象

傳遞對象的寫法和傳遞數值一樣，下面只寫出關鍵步驟：

父組件

<template> <div>  <!-- 2.使用子組件，并向子組件傳值，這里的 this 就是 Home 組件 -->  <v-head :home="this"></v-head>  <br>  <br> </div></template><script>// 1.引入子組件import Head from './Head.vue';export default { data() {  return {   msg: '我是一個組件'  } }, methods: {  run() {   alert(this.msg);  } }, components: {  "v-head": Head }, // 頁面刷新時請求數據 mounted() { }}</script>

子組件

<template> <div>  <!-- data對象里并沒有 msg 屬性，這里調用的是父類傳遞過來的 msg 屬性 -->  <h2>{{msg}}</h2>  <br>  <br>  <button @click="run">接收父組件的方法</button> </div></template><script>export default { data() {  return {   // 調用傳過來的home組件的msg屬性   msg: this.home.msg  } }, methods: {  run() {   // 調用傳過來的home組件的run()方法   this.home.run();  } }, // 接收父類的傳值 props: ['home']}</script>

（四）傳遞數值類型校驗