vue父传子代码详情 和代码中文详细注解
时间: 2024-04-12 08:26:50 浏览: 8
当使用Vue框架时,可以通过父组件传递数据给子组件。下面是一个示例代码,以及对代码中各部分的详细中文注解:
父组件(Parent.vue)代码:
```vue
<template>
<div>
<h1>{{ message }}</h1>
<Child :count="count" @increment="incrementCount" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
data() {
return {
message: '父组件',
count: 0
};
},
methods: {
incrementCount() {
this.count++;
}
}
};
</script>
```
子组件(Child.vue)代码:
```vue
<template>
<div>
<h2>{{ count }}</h2>
<button @click="increment">{{ buttonText }}</button>
</div>
</template>
<script>
export default {
props: {
count: {
type: Number,
required: true
}
},
data() {
return {
buttonText: '点击增加'
};
},
methods: {
increment() {
this.$emit('increment');
}
}
};
</script>
```
注解:
1. 父组件(Parent.vue)中通过`<Child :count="count" @increment="incrementCount" />`语法将父组件的`count`属性传递给子组件,并监听子组件触发的`increment`事件。
2. 子组件(Child.vue)中使用`props`属性声明了一个名为`count`的属性,类型为`Number`,并且设置为必需的。
3. 子组件使用`{{ count }}`语法将接收到的父组件传递的`count`属性值显示在页面上。
4. 子组件中的按钮通过`@click="increment"`语法绑定了`increment`方法,该方法在点击按钮时会触发,并通过`this.$emit('increment')`语法触发父组件监听的`increment`事件。
5. 父组件中的`incrementCount`方法会在子组件触发`increment`事件时执行,实现计数器的增加功能。
这是一个简单的父传子数据的实例,父组件通过props将数据传递给子组件,并通过自定义事件实现子组件向父组件传递数据的功能。