vue父子组件通信

vue父子组件通信

为了方便理解和加深父子组件通信，简单写了个小demo

一、组件目录结构

• parent.vue
• son.vue
  操作步骤如下：

1.父组件向子组件传值

import son from "./components/son";

1.2 在父组件的components中注册该子组件

components: {
    son
  }

1.3 在父组件的template中使用子组件

<son></son>

1.4 将需要传递给子组件的值通过v-bind(如果传递的是固定值，则不需要v-bind，直接属性名，属性值传递即可)。

<div class="parent">我是父组件</div>
<son :price="jiage"></son>
//  此处的jiage则是传递给子组件的值

<script>
// 第一步
import son from "./components/son";
export default {
   
  name: '',
  components: {
   
    // 第二步
    son