技術標籤：vuevuehtmljshtml5javascript

vue 父子元件通訊

一、父元件向子元件傳值

父元件：

<template>
<!-- 父元件 -->
  <div class="parentCont">
  我是父元件下面是我的子元件
  <!-- 
  	渲染子元件
  	childData 子元件props接收的引數名
  	parnentData 父元件data中的變數名
   -->
    <Childs :childData="parnentData"/>
  </div>
</template>

<script>
// 引入子元件
import Childs from "./components/child"
export default {
    components:{
        Childs
    },
    data() {
        return {
            parnentData: '我是父元件的資料'
        }
    }
}
</script>
 

子元件：

<template>
<!-- 子元件 -->
  <div class="childCont">
      <-- 在頁面上輸出，父元件傳遞過來的引數 -->
      我是子元件，這是父元件傳遞過來的資料：{{childData}}
  </div>
</template>

<script>
export default {
	// 接收父元件傳遞過來的引數名
    props:['childData']
}
</script>

執行結果：

下篇文章講解：子元件向父元件傳值！！！