Vue父子元件之間的呼叫和資料傳遞

• 父子元件的定義
• 兩個檔案的父子元件

父子元件的定義

vue的官網上寫了一些關於父子元件的定義呼叫及值的傳遞。這裡我就不做過多的贅述了。我只說一下我在開發中遇到的一些小問題。

兩個檔案的父子元件

vue官網和菜鳥教程上說的並不是很清楚，這裡我就清楚的說一下。廢話不多說，直接上程式碼。

父元件：

<template>
  <div>
    試試:
    <my-dialog v-bind="dialog_data"></my-
 
dialog>
  </div>
</template>

<script>
// 父元件引用子元件，注意避開關鍵字
import myDialog from '../publicCompoments/winDialog'
export default {
  components: { myDialog },
  data() {
    return {
      dialog_data: {
        isNoWin: true, // 是否沒中獎 預設未中獎,值為:true
        iconPath: require('../../assets/img/undraw.png'
 
),   // 注意這裡要用require傳圖片
        title: '頁面測試標題!',  // 頁面標題
        text: '頁面測試文字！',    // 文字
      }
    }
  }
}
</script>

<style scoped>

</style>

子元件：這裡要注意一下子元件的檔名要避開關鍵字，父元件中引用的時候也要注意避開關鍵字，這是開發時候的常識了，但是這個出錯了不太好查。
在這裡我還解釋父子元件中如何傳值，如何傳圖片的路徑的問題，如果還是不怎麼看的懂，可以看一下菜鳥教程或者官方API

<template>
 

  <div>
    <div v-if="isNoWin">
      <div>
        <!-- 父子元件之間傳遞圖片,子元件的img標籤中的src要使用 :scr="imgPath";
        父元件中的值要用require()這個函式傳值 -->
        <img :src="iconPath">
      </div>
      <div>
        <span>{{ title }}</span>
      </div>
      <div>
        {{ text }}
      </div>
    </div>
    <div v-if="isNoWin != true">

    </div>
    <div v-if="isNoWin != true">
      請填寫資訊:{{ text }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'winDialog',	// 這個name是必須的，方便引用
  props: {
    isNoWin: {  // 一個控制標籤，可設定預設值
      type: Boolean,
      default: false	//設定預設值
    },
    iconPath: String,   // 頁面現實的額圖示
    title: String,  // 頁面標題
    text: String,    // 文字
  }
}
</script>
<style scoped>
</style>

暫時記得的就只有這麼多，以後再更新吧