vue 最簡單的父組件引用子組件

父組件代碼

<template>
  <div>
      <comtest2  :name = "name"></comtest2>
  </div>
</template>

<script>
import test02 from './test02.vue';
export default {
      data() {
      return {
        name: "我的名字是test01"
      }
      },
      methods:{ 
      }, 
      beforeMount(){
      },
      mounted(){
      },
      watch: {
      },
      components: {comtest2:test02},
}
</script>

<style>

</style>

子組件代碼

<template>
  <div>
      {{name}}
  </div>
</template>

<script>
// import animated from 'animate.css' 
export default {
      data() {
      return {
      }
      },
      methods:{ 
      }, 
      beforeMount(){
      },
      mounted(){
          console.log(this.name)
      },
      watch: {
      },
      props: ['name'],
}
</script>

<style>

</style>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章