vue父传子

Posted 2021-02-05 luguankun

父组件传递数据给子组件用props，父组件中使用子组件，子组件用props接收父组件数据。

Home父组件代码：

<template>
<div>
     {{test}}
     <!-- 使用子组件,绑定父组件数据数据 -->
    <Child :test="test"></Child>
</div>
</template>
<script>
// import子组件
import Child from ‘./Child.vue‘
export default {
  name: "Home",
  //components引入子组件
  components:{
      Child
  },
  data () {
    return {
        test:123
    };
  }
}
</script>
<style lang="css" scoped>
</style>

Child子组件代码：

<template>
<div>
    <!-- 使用子组件数据 -->
     {{test}}
</div>
</template>
<script>
export default {
  name: "Child",
//   props使用获取父组件数据
  props:["test"],
  data () {
    return {
        
    };
  },
  created(){
    //   使用子组件数据
      console.log(this.test);
      
  }
}
</script>
<style lang="css" scoped>
</style>