父组件（MyFather.vue）完整代码逐字解释
vue
<template>
<div class="father-wrap">
<h2>父组件容器</h2>
<MySon
:username="parentName"
:age="parentAge"
@name-change="handleNameUpdate"
></MySon>
</div>
</template>
<script>
import MySon from '@/components/MySon.vue'
export default {
name: 'MyFather',
components: { MySon },
data() {
return {
parentName: '初始名',
parentAge: 20
}
},
methods: {
handleNameUpdate(newVal) {
this.parentName = newVal
}
}
}
</script>
<style scoped>
.father-wrap { padding: 20px; }
</style>1. <template>
<template>：Vue 组件视图模板容器，定义组件渲染的 DOM 结构，所有页面展示内容需包裹在此标签内。<div class="father-wrap">：Vue2 要求模板必须有唯一根元素，<div>作为父组件视图的根容器；class="father-wrap"为根容器绑定样式类，用于样式隔离与控制。<h2>父组件容器</h2>：普通 HTML 标签，仅用于标识父组件视图区域，无业务逻辑作用。<MySon>：子组件调用标签，名称与子组件注册名一致，用于在父组件中渲染子组件。:username="parentName"：:是v-bind的简写，实现父→子数据单向传递；username是子组件定义的 props 属性名，parentName是父组件 data 中的响应式数据，将父组件数据绑定到子组件 props。:age="parentAge"：同上，age为子组件 props 属性，parentAge为父组件 data 数据，传递数值型数据。@name-change="handleNameUpdate"：@是v-on的简写，监听子组件抛出的name-change事件；handleNameUpdate是父组件 methods 中定义的事件处理方法，用于接收子组件传递的数据并处理。</MySon>：子组件标签闭合，标识子组件调用结束。</div>：根容器标签闭合。</template>：模板标签闭合，标识视图结构定义结束。
2. <script>
<script>：组件逻辑代码容器，用于编写组件的数据、方法、组件引入 / 注册等业务逻辑。import MySon from '@/components/MySon.vue'：import是 ES6 模块化引入语法，MySon是自定义的子组件引用名；from指定子组件文件路径，@是 Vue 项目中src目录的路径别名，@/components/MySon.vue指向子组件文件位置，作用是将子组件引入当前父组件。export default：ES6 语法，导出 Vue 组件配置对象，使该对象能被 Vue 解析为组件实例。name: 'MyFather'：定义组件名称，用于 Vue Devtools 调试识别组件、递归组件调用（组件自身引用自身）等场景。components: { MySon }：注册子组件，components是 Vue 组件配置项，用于声明当前组件依赖的子组件；{ MySon }是{ MySon: MySon }的 ES6 简写，键值均为子组件引用名，注册后<template>中才能使用<MySon>标签调用子组件。data()：Vue 组件响应式数据配置项，必须是函数（避免多个组件实例共享数据），返回值为对象，对象中的属性为组件响应式数据。return { ... }：返回响应式数据对象，parentName和parentAge是父组件自身的响应式数据，数据变化会触发视图更新。methods: { ... }：Vue 组件方法配置项，用于定义组件的事件处理、业务逻辑方法。handleNameUpdate(newVal) { ... }：父组件定义的事件处理方法，newVal是子组件触发事件时传递的参数；方法内将parentName更新为newVal，实现子→父数据传递后的状态更新。</script>：逻辑代码标签闭合。
3. <style scoped>
<style>：组件样式容器，用于编写组件的 CSS 样式。scoped：style标签的属性，作用是使样式仅作用于当前组件的 DOM 元素（通过给元素添加唯一属性实现样式隔离），避免样式污染其他组件。.father-wrap { padding: 20px; }：为父组件根容器的样式类设置内边距，scoped属性确保该样式仅影响当前组件的.father-wrap元素。</style>：样式标签闭合。
子组件（MySon.vue）完整代码逐字解释
vue
<template>
<div class="son-wrap">
<p>父传子姓名：{{ username }}</p>
<p>父传子年龄：{{ age }}</p>
<button @click="triggerNameChange">修改姓名</button>
</div>
</template>
<script>
export default {
name: 'MySon',
props: {
username: {
type: String,
required: true,
default: '默认姓名'
},
age: {
type: Number,
validator: (val) => val >= 0
}
},
data() {
return {
sonNewName: '子组件新名'
}
},
methods: {
triggerNameChange() {
this.$emit('name-change', this.sonNewName)
}
}
}
</script>
<style scoped>
.son-wrap { margin: 10px; border: 1px solid #ccc; }
</style>1. <template>
<template>：子组件视图模板容器，定义子组件的 DOM 结构。<div class="son-wrap">：子组件的根容器，class="son-wrap"用于子组件样式控制。<p>父传子姓名：{``{ username }}</p>：{``{ username }}是 Vue 插值语法，用于渲染子组件 props 中接收的username数据（父组件传递的值）。<p>父传子年龄：{``{ age }}</p>：同上，渲染 props 中接收的age数据。<button @click="triggerNameChange">修改姓名</button>：<button>是交互按钮，@click监听按钮点击事件，triggerNameChange是子组件 methods 中定义的方法，点击按钮时执行该方法。</div>：子组件根容器闭合。</template>：子组件模板标签闭合。
2. <script>
<script>：子组件逻辑代码容器。export default：导出子组件配置对象。name: 'MySon'：定义子组件名称，用于调试和组件识别。props: { ... }：Vue 组件 props 配置项，用于接收父组件传递的数据，支持类型校验、必填校验、默认值、自定义校验等。username: { ... }：定义接收父组件传递的username属性。type: String：指定username的类型为字符串，若父组件传递非字符串类型会报警告。required: true：指定username为必填属性，若父组件未传递会报警告。default: '默认姓名'：指定username的默认值（仅在required: false时生效）。
age: { ... }：定义接收父组件传递的age属性。type: Number：指定age类型为数值。validator: (val) => val >= 0：自定义校验函数，校验age值需大于等于 0，若不满足会报警告。
data() { ... }：子组件自身的响应式数据配置项，返回的sonNewName是子组件内部使用的状态，不依赖父组件。methods: { ... }：子组件方法配置项。triggerNameChange() { ... }：子组件定义的方法，用于触发自定义事件。this.$emit('name-change', this.sonNewName)：this.$emit是 Vue 实例方法，用于向上（父组件）抛出自定义事件；name-change是自定义事件名（需与父组件监听的事件名一致），this.sonNewName是传递给父组件的参数，实现子→父数据传递。
</script>：子组件逻辑代码标签闭合。
3. <style scoped>
<style scoped>：子组件样式容器，scoped确保样式仅作用于子组件 DOM 元素。.son-wrap { margin: 10px; border: 1px solid #ccc; }：为子组件根容器设置外边距和边框样式，实现子组件视图的视觉隔离。</style>：子组件样式标签闭合。