vue 使用props进行父子组件传值

1.在父组件中引入子组件

import About from '@/views/About'

2.在父组件中注册子组件

components: {
  About
}

3.在父组件中定义要传递的变量

data() {
  return {
    userName: '小明'
  }
}

4.在父组件中使用子组件，通过动态绑定:userName="userName"进行数据传输

<About :userName="userName"></About>

5.在子组件中用props接收变量

props: {
    userName: String
}

6.然后就可以在子组件中使用userName，vue 使用props进行父子组件传值完成

<h3>你好！{{userName}}</h3>

7.完整的代码案例

<template>
  <div class="home">
    <h3>我是{{userName}}</h3>
    <About :userName="userName"></About>
  </div>
</template>

<script>
import About from '@/views/About'

export default {
  name: 'home',
  components: {
    About
  },
  data() {
    return {
      userName: '小明'
    }
  }
}
</script>

<template>
    <div class="about">
        <h3>你好！{{userName}}</h3>
    </div>
</template>

<script>

    export default {
        name: 'aBout',
        props: {
            userName: String
        },
        data() {
            return {}
        }
    }
</script>