父元件傳值給子元件
【 各位看的時候記得要看程式碼中的註釋！！記得！！】
父元件給子元件傳值，最最要記得【 props】,在子元件中用 props 來接收父元件傳來的資料，之後展示在子元件中。
例如：
子元件 child.vue
<template>
<div>
<h5>我是子元件</h5>
<p>我從父元件獲取到的資訊是： {{message}}</p>
<!----在html中呼叫這個 message 屬性，顯示資料--->
</div>
</template>
<script>
export default{
props:[`message`] //建立 props,為它建立 message 這個屬性
}
</script>
<style>
</style>
建立了子元件之後，就需要在父元件中 註冊一下 子元件,然後給子元件傳值。
父元件 father.vue
<template>
<div id="app">
<h5>我是父元件</h5>
<!---- ② 引入子元件標籤 -->
<child message="hello"></child>
<!--- 建立child標籤，在該標籤中把我們在 子元件中建立的 message 賦值為 “hello” --->
</div>
</template>
<script>
import child from `./components/child`;
export default{
name:`app`,
// ① 註冊子元件
components:{
child
}
}
</script>
<style>
</style>
接下來子元件就會收到 “hello” 這個資訊。
子元件 child.vue
<template>
<div>
<h5>我是子元件</h5>
<!---- 子元件收到資訊 --->
<p>我從父元件獲取到的資訊是： {{message}}</p> <!-- 我從父元件獲取到的資訊是： hello -->
<!----在html中呼叫這個 message 屬性，顯示資料--->
</div>
</template>
<script>
export default{
props:[`message`] //建立 props,為它建立 message 這個屬性
}
</script>
<style>
</style>
另外，我們也可以在父元件對 message 的值進行 v-bind 動態繫結
例如：
父元件 father.vue
<template>
<div id="app">
<h5>我是父元件</h5>
<!---- ② 引入子元件標籤 -->
<child v-bind:message="theword"></child>
<!--- 建立child標籤，用 v-bind對 message 的值進行動態繫結，theword用於父元件，父元件對它賦值 --->
</div>
</template>
<script>
import child from `./components/child`;
export default{
name:`app`,
data(){
return{
theword:"come on baby" //對 theword 進行賦值。
}
}
// ① 註冊子元件
components:{
child
}
}
</script>
<style>
</style>
總結
- 子元件中要使用props設定一個屬性 message 來接收父元件傳過來的值。
- 父元件中： 1. 先註冊子元件 2. 引入子元件標籤，在標籤中給message賦值
或者
- 父元件中：用v-bind對 message 進行動態繫結，給message 設定一個引數 theword ，父元件中在 data()中設定 theword 的值。