vue組建之間值得傳遞(父到子)

具體的看代碼中的註釋

App.vue(父組件)

<style>

</style>

<template>
  <div id="app">
    <h1>Hello Vue</h1>
    
    <!--在組件中綁定name屬性,name值在父組件中賦值-->
    <modal-tip
      :name="name"
    ></modal-tip>

  </div>
</template>

<script>

//將子組件引入父組件
import modalTip from './modalTip.vue'

export default {
  name: 'app',
  //在components屬性中註冊局部組件(區別於全局組件),供父組件調用
  components:{
    modalTip
  },
  data () {
    return {
      //對name進行賦值
      name:'zqz'
    }
  }
}
</script>

modalTip.vue(子組件)

<style>
    

</style>
<template>

    <p>{{ name }}</p>

</template>
<script>

export default {
    props:{
        //對來自於父組件的值進行校驗(體現出嚴謹性)
        name:{
            //校驗類型
            type:String,
            //設置默認值
            default:'zqz',
            //校驗是否必須
            required:true,
        }
    },
    name:'modalTip',
    
}
    
</script>