vue2技能树（9）-prop属性，自定义事件

---

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

Vue 2 中的 Prop 详解

在Vue.js 2中，Props（属性） 是一种允许父组件向子组件传递数据的机制，它是Vue组件之间通信的重要方式之一。以下是对Vue 2中Props的多方面详细介绍，包括使用详细的项目示例。

基本用法

在Vue组件中，通过在子组件的模板中声明props 来定义接受的属性，然后可以在父组件中通过自定义属性的方式将数据传递给子组件。

项目示例

假设你有一个UserCard 子组件，用于显示用户的名字。

<div id="app">
  <user-card username="John Doe">user-card>
div>
1
2
3

Vue.component('UserCard', {
  props: ['username'], // 声明props
  template: `
{{ username }}`
});

new Vue({
  el: '#app'
});
1
2
3
4
5
6
7
8

在这个示例中，UserCard 子组件通过props: ['username'] 声明了一个名为username 的属性。然后，父组件可以通过username 自定义属性将数据传递给子组件。

动态Props

你可以使用动态的数据来传递props，这样子组件可以接受来自父组件的动态数据。

项目示例

假设你有一个父组件，通过v-bind 动态地将数据传递给子组件。

<div id="app">
  <user-card :username="dynamicUsername">user-card>
div>
1
2
3

Vue.component('UserCard', {
  props: ['username'],
  template: `
{{ username }}`
});

new Vue({
  el: '#app',
  data: {
    dynamicUsername: 'Jane Smith'
  }
});
1
2
3
4
5
6
7
8
9
10
11

在这个示例中，父组件通过:username="dynamicUsername" 动态地将dynamicUsername 数据传递给子组件。

Prop 验证

Vue 2还支持对props 进行验证，确保传递给子组件的数据符合预期。

项目示例

假设你有一个Post 子组件，接受一个title 属性，并希望确保它是字符串类型。

<div id="app">
  <post :title="123">post>
div>
1
2
3

Vue.component('Post', {
  props: {
    title: {
      type: String, // 类型验证
      required: true // 必需属性
    }
  },
  template: `
{{ title }}`
});

new Vue({
  el: '#app'
});
1
2
3
4
5
6
7
8
9
10
11
12
13

在这个示例中，Post 子组件通过props 的验证选项确保title 是一个必需的字符串类型属性。如果传递的数据不符合验证规则，Vue会在控制台中发出警告。

单向数据流

在Vue中，props 遵循单向数据流的原则，父组件传递数据给子组件后，子组件不应该修改这些数据。如果需要从子组件向父组件传递数据，你应该使用自定义事件。

项目示例

假设你有一个Counter 子组件，用于显示计数器值，但不允许子组件直接修改父组件传递的计数值。

<div id="app">
  <counter :count="count" @increment="incrementCount">counter>
div>
1
2
3

Vue.component('Counter', {
  props: ['count'],
  template: `
    

      +1
      计数：{{ count }}
    
  `,
  methods: {
    increment() {
      this.$emit('increment'); // 触发自定义事件
    }
  }
});

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    incrementCount() {
      this.count++;
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这个示例中，Counter 子组件通过$emit 触发increment 自定义事件，来请求父组件增加计数值。这遵循了单向数据流的原则。

Props 是Vue.js中一个非常重要的概念，用于在组件之间传递数据。你可以通过定义props来声明子组件所需的数据，实现组件之间的通信。 Props 的动态绑定和验证功能使得数据传递更加灵活和可靠。但记住，遵循单向数据流的原则，确保props只用于父到子的数据传递。

Vue 2 自定义事件详解

自定义事件是Vue.js 2中的一个关键概念，它允许你在组件之间进行通信，使得父组件和子组件能够互相传递数据和触发行为。以下是对Vue 2中自定义事件的多方面详细介绍，包括使用详细的项目示例。

自定义事件的基本使用

在Vue组件中，你可以使用$emit 方法来触发自定义事件，并在父组件中通过v-on 来监听和处理这些事件。

项目示例

假设你有一个Button 子组件，点击按钮后触发自定义事件，父组件监听并处理这个事件。

<div id="app">
  <button @custom-click="handleCustomClick">点击我button>
div>
1
2
3

Vue.component('Button', {
  template: `点击我`,
  methods: {
    emitCustomClick() {
      this.$emit('custom-click'); // 触发自定义事件
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    handleCustomClick() {
      alert('自定义事件被触发了！');
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这个示例中，Button 子组件使用this.$emit('custom-click') 来触发custom-click 自定义事件，父组件使用@custom-click 来监听并处理这个事件。

传递数据

自定义事件不仅可以触发行为，还可以传递数据给父组件。你可以在$emit 方法的第二个参数中传递数据。

项目示例

假设你有一个Counter 子组件，点击按钮后触发自定义事件，传递计数值给父组件。

<div id="app">
  <counter @custom-increment="handleCustomIncrement">counter>
  <p>计数：{{ count }}p>
div>
1
2
3
4

Vue.component('Counter', {
  data() {
    return {
      count: 0
    };
  },
  template: `
    

      +1
    
  `,
  methods: {
    increment() {
      this.count++;
      this.$emit('custom-increment', this.count); // 传递计数值
    }
  }
});

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    handleCustomIncrement(count) {
      alert(`计数增加到 ${count}`);
      this.count = count;
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这个示例中，Counter 子组件通过this.$emit('custom-increment', this.count) 来触发custom-increment 自定义事件，并传递计数值给父组件。

命名自定义事件

除了直接使用字符串作为事件名，你还可以使用命名自定义事件来更好地组织和管理事件。

项目示例

假设你有一个Product 子组件，点击按钮后触发一个命名自定义事件。

<div id="app">
  <product @add-to-cart="handleAddToCart">product>
  <p>购物车中有 {{ cartItems }} 件商品p>
div>
1
2
3
4

Vue.component('Product', {
  template: `添加到购物车`,
  methods: {
    addToCart() {
      this.$emit('add-to-cart'); // 触发命名自定义事件
    }
  }
});

new Vue({
  el: '#app',
  data: {
    cartItems: 0
  },
  methods: {
    handleAddToCart() {
      this.cartItems++;
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这个示例中，Product 子组件使用this.$emit('add-to-cart') 来触发add-to-cart 命名自定义事件。

自定义事件是Vue.js中非常强大的功能，它使得组件之间可以互相传递数据和触发行为，使得组件更具交互性和可重用性。无论是基本的自定义事件、传递数据还是命名自定义事件，都可以满足不同的需求，帮助你构建丰富的交互式应用。