vue2 父子组件传值及修改

Prop

Prop，用于在子组件中接收父组件传递的数据。

父组件传值

在父组件中，渲染子组件时，可以通过自定义属性来向子组件传递数据：

<Child name="zhangsan" age="20"></Child>

注意：除了传递普通字符串以外，其他任意数据类型，包括动态数据，都需要通过 v-bind 指令进行传递。

子组件接收数据

子组件中通过 props 属性来接收父组件传递的数据：

export default {
    props: ['name', 'age']
}

子组件接收到数据后，可以直接通过属性名进行访问使用了。

当父组件对该数据进行修改时，子组件会更新。

Prop 验证

子组件在通过 props 接收数据时，还可以对数据进行验证。

export default {
    // props: ["name", "age", "msg"],
    props: {
        name: String,
        age: [Number, String], // 数字和字符串
        msg: String,
        gender: {
            type: String,
            required: true // 父组件必须传递该数据
        },
        num: {
            type: Number,
            default: 100,  // 默认值为 100
        },
        friends: {
            // 数组和对象的默认值，通过函数的返回值来设置
            // type: Array,
            // default: () => [],
            type: Object,
            default: () => ({}),
        },
    },
};

 

自定义事件

当子组件想要调用父组件的方法时，可以通过自定义事件来实现。

父组件设置自定义事件

父组件在渲染子组件时，可以在子组件上通过 @自定义事件名="方法名" 来给子组件设置自定义事件：

<template>
    <div>
        <h1>父组件</h1>
        <Child @sayHello="sayHello"></Child>
    </div>
</template>
​
<script>
import Child from "./Child.vue";
export default {
    components: {
        Child,
    },
    methods: {
        sayHello() {
            console.log('hello');
        }
    }
};
</script>

子组件触发自定义事件

在子组件中，通过 $emit() 方法来触发父组件设置的自定义事件：

<template>
    <div>
        <h2>子组件</h2>
        <!-- 直接触发父亲的自定义事件 -->
        <button @click="$emit('sayHello')">sayHello</button>
        <!-- 先调用自己的方法，在自己的方法中触发父亲的自定义事件 -->
        <button @click="sayHello">sayHello</button>
    </div>
</template>
​
<script>
export default {
    methods: {
        sayHello() {
            this.$emit('sayHello');
        }
    }
};
</script>

自定义事件的应用场景

• 子组件想要修改父组件的数据

  父组件：

  <template>
      <div>
          <h1>父组件</h1>
          <Child @changeName="changeName"></Child>
      </div>
  </template>
  ​
  <script>
  import Child from "./Child.vue";
  export default {
      components: {
          Child,
      },
      data() {
          return {
              name: 'zhangsan'
          }
      },
      methods: {
          // 修改 name 的方法
          changeName() {
              this.name = '李四';
          }
      }
  };
  </script>

  子组件：

  <button @click="$emit('changeName')">李四</button>

• 子组件想要传值父组件

  父组件：

  <template>
      <div>
          <h1>父组件</h1>
          <Child @changeName="changeName"></Child>
      </div>
  </template>
  ​
  <script>
  import Child from "./Child.vue";
  export default {
      components: {
          Child,
      },
      data() {
          return {
              name: 'zhangsan'
          }
      },
      methods: {
          // 修改 name 的方法
          changeName(newName) {
              // newName 用于接收子组件传递的数据
              this.name = newName;
          }
      }
  };
  </script>

  子组件：

  <button @click="$emit('changeName', '王五')">王五</button>
  <script>
  this.$parent.changeName('王五')
  </script>