Vue父子组件值传递原来可以这样做？？

Vue–父子组件的数据传递

1.props自定义属性

子组件：

<template>
    <div id="runoob">
        <div >
           {{msg}}
        </div>
    </div>
</template>
<script>
export default {
    name:"runoob",
    props:{
        msg:String
    }
}
</script>

父组件：

<template>
  <div id="app">
    <Child msg="好好学习天天向上"></Child>
  </div>
</template>

<script>

import Child from './components/child.vue'

export default {
  name: 'App',
  components: {
    Child
  }
}
</script>

注意：这种数据传递方式不要求子组件的变量名与父组件的变量名必须保持一致。

2. 父子组件直接传递

子组件：

<template>
  <div class="hello">
    <div v-html="message"></div>
  </div>
</template>
 
<script>
export default {
  name: 'Hello',
  data () {
    return {
      message: '<h1>开始学习啦啦啦啊</h1>'
    }
  }
}
</script>

父组件：

<template>
  <div id="app">
    <Hello>{{message}}</Hello>
  </div>
</template>

<script>
import Hello from './components/Hello.vue'

export default {
  name: 'App',
  components: {
    Hello
  }
}
</script>

注意：这种数据传递方式要求子组件的变量名与父组件接收的变量名必须保持一致，否则没有运行结果

小弟初来乍到，感悟不深，如有不恰当部分，请大家指正，多谢！