vue2技能树（9）-prop属性，自定义事件
目录
- Vue 2 中的 Prop 详解
-
- 基本用法
-
- 项目示例
- 动态Props
-
- 项目示例
- Prop 验证
-
- 项目示例
- 单向数据流
-
- 项目示例
- Vue 2 自定义事件详解
-
- 自定义事件的基本使用
-
- 项目示例
- 传递数据
-
- 项目示例
- 命名自定义事件
-
- 项目示例
点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！
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>
Vue.component('UserCard', {
props: ['username'], // 声明props
template: `{{ username }}`
});
new Vue({
el: '#app'
});
在这个示例中，UserCard 子组件通过props: ['username'] 声明了一个名为username 的属性。然后，父组件可以通过username 自定义属性将数据传递给子组件。
动态Props
你可以使用动态的数据来传递props，这样子组件可以接受来自父组件的动态数据。
项目示例
假设你有一个父组件，通过v-bind 动态地将数据传递给子组件。
<div id="app">
<user-card :username="dynamicUsername">user-card>
div>
Vue.component('UserCard', {
props: ['username'],
template: `{{ username }}`
});
new Vue({
el: '#app',
data: {
dynamicUsername: 'Jane Smith'
}
});
在这个示例中，父组件通过:username="dynamicUsername" 动态地将dynamicUsername 数据传递给子组件。
Prop 验证
Vue 2还支持对props 进行验证，确保传递给子组件的数据符合预期。
项目示例
假设你有一个Post 子组件，接受一个title 属性，并希望确保它是字符串类型。
<div id="app">
<post :title="123">post>
div>
Vue.component('Post', {
props: {
title: {
type: String, // 类型验证
required: true // 必需属性
}
},
template: `{{ title }}`
});
new Vue({
el: '#app'
});
在这个示例中，Post 子组件通过props 的验证选项确保title 是一个必需的字符串类型属性。如果传递的数据不符合验证规则，Vue会在控制台中发出警告。
单向数据流
在Vue中，props 遵循单向数据流的原则，父组件传递数据给子组件后，子组件不应该修改这些数据。如果需要从子组件向父组件传递数据，你应该使用自定义事件。
项目示例
假设你有一个Counter 子组件，用于显示计数器值，但不允许子组件直接修改父组件传递的计数值。
<div id="app">
<counter :count="count" @increment="incrementCount">counter>
div>
Vue.component('Counter', {
props: ['count'],
template: `
计数：{{ count }}
`,
methods: {
increment() {
this.$emit('increment'); // 触发自定义事件
}
}
});
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
incrementCount() {
this.count++;
}
}
});
在这个示例中，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>
Vue.component('Button', {
template: ``,
methods: {
emitCustomClick() {
this.$emit('custom-click'); // 触发自定义事件
}
}
});
new Vue({
el: '#app',
methods: {
handleCustomClick() {
alert('自定义事件被触发了！');
}
}
});
在这个示例中，Button 子组件使用this.$emit('custom-click') 来触发custom-click 自定义事件，父组件使用@custom-click 来监听并处理这个事件。
传递数据
自定义事件不仅可以触发行为，还可以传递数据给父组件。你可以在$emit 方法的第二个参数中传递数据。
项目示例
假设你有一个Counter 子组件，点击按钮后触发自定义事件，传递计数值给父组件。
<div id="app">
<counter @custom-increment="handleCustomIncrement">counter>
<p>计数：{{ count }}p>
div>
Vue.component('Counter', {
data() {
return {
count: 0
};
},
template: `
`,
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;
}
}
});
在这个示例中，Counter 子组件通过this.$emit('custom-increment', this.count) 来触发custom-increment 自定义事件，并传递计数值给父组件。
命名自定义事件
除了直接使用字符串作为事件名，你还可以使用命名自定义事件来更好地组织和管理事件。
项目示例
假设你有一个Product 子组件，点击按钮后触发一个命名自定义事件。
<div id="app">
<product @add-to-cart="handleAddToCart">product>
<p>购物车中有 {{ cartItems }} 件商品p>
div>
Vue.component('Product', {
template: ``,
methods: {
addToCart() {
this.$emit('add-to-cart'); // 触发命名自定义事件
}
}
});
new Vue({
el: '#app',
data: {
cartItems: 0
},
methods: {
handleAddToCart() {
this.cartItems++;
}
}
});
在这个示例中，Product 子组件使用this.$emit('add-to-cart') 来触发add-to-cart 命名自定义事件。
自定义事件是Vue.js中非常强大的功能，它使得组件之间可以互相传递数据和触发行为，使得组件更具交互性和可重用性。无论是基本的自定义事件、传递数据还是命名自定义事件，都可以满足不同的需求，帮助你构建丰富的交互式应用。