vue 父子组件通信

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>

运行结果：

下篇文章讲解：子组件向父组件传值！！！