parent.vue 父

<template>
　<div class="wapper">
     <child message="hello!"></child>
</div>
</template>

 <script>
import child from ‘../components/child‘
 export default {
  name:‘wapper‘,
  components:{child}
 }
 </script>

child.vue 子

 <template>
    <
 
div @click="up">點我</div>
</template>

<script>
  export default{
    data(){
      return {
        msg: ‘請輸入值‘
      }
    },
    props:[‘message‘],
    methods: {
     up() {
       console.log(this.message)
    }
    }
  }
</script>

結果：

hello

props 父向子組件傳參