vue中使用props傳遞參數

通常，父組件的模板中包含子組件，父組件要正向地向子組件傳遞數據或參數，子組件收到后根據參數的不同來渲染不同的內容，或者執行操作。 這個正向傳遞數據的過程是通過props來實現的。

在組件中，子組件使用props來聲明需要從父組件接受的數據。
但是父組件不能向子組件傳遞數據。
需要注意的是:
在 js中對象和數組是引用類型，指向同一個內存空間，所以 props 是對象和數組時，在子組件內改變是會影響父紐件的。

然后寫了一個傳遞的demo
父組件中

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld  :message1="messageToHelloWorld"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  data() {
    return {
      messageToHelloWorld:'我是父組件向下傳遞的信息'
    }
  },
  components: {
    HelloWorld
  }
}
</script>

子組件中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Linkssss</h2>
    <h3>{{ message1 }}</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['message1'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

業務中，還比較常用組件驗證: