Django+Vue全栈开发项目入门(二)
Vue是一款用于构建用户界面的JavaScript渐进式框架,它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、响应式的、组件化的编程模型,有助于高效地开发用户界面。
环境准备
安装Node.js:Vue项目的构建和运行依赖于Node.js环境。可以从Node.js官网下载并安装Node.js,建议安装LTS版本以获得长期支持和稳定性。
验证Node.js安装:在命令行中输入node -v
和npm -v
,如果正确输出版本号,则表示Node.js和npm安装成功。
父子传递
在Vue.js中,父子组件之间的数据传递是开发过程中常见的需求。Vue提供了一套清晰的机制来实现这一功能,包括父组件向子组件传递数据(props)和子组件向父组件发送消息(事件)。
父组件向子组件传递数据(props)
在Vue中,父组件可以通过在子组件标签上使用自定义属性(即props)来传递数据给子组件。子组件通过props
选项来声明它期望接收的数据。
<!-- 父组件 -->
<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from Parent!'
};
}
};
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
};
</script>
在这个例子中,父组件通过message
prop将parentMessage
数据传递给子组件,子组件在模板中通过插值表达式{{ message }}
来显示这个数据。
子组件向父组件发送消息(事件)
子组件可以通过触发自定义事件来向父组件发送消息。父组件可以在子组件标签上使用v-on
指令(或简写形式@
)来监听这些事件,并在事件触发时执行相应的处理函数。
<!-- 父组件 -->
<template>
<div>
<ChildComponent @notify="handleNotify" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleNotify(payload) {
console.log('Received from child:', payload);
}
}
};
</script>
<!-- 子组件 -->
<template>
<div>
<button @click="notifyParent">Notify Parent</button>
</div>
</template>
<script>
export default {
methods: {
notifyParent() {
this.$emit('notify', 'Hello from Child!');
}
}
};
</script>
在这个例子中,子组件有一个按钮,当点击按钮时,会调用notifyParent
方法,该方法通过$emit
触发一个名为notify
的自定义事件,并传递一个字符串作为参数。父组件监听了这个事件,并在事件触发时执行handleNotify
方法,打印出接收到的消息。
注意事项
props是单向的:父组件传递给子组件的数据(props)应该是单向流动的。子组件不应该直接修改props的值,因为这可能会导致父组件的状态变得不可预测。如果子组件需要基于props的值进行更改,它应该使用计算属性或本地数据属性来创建自己的副本。
事件命名:自定义事件的名称应该避免与HTML原生事件名称冲突,并且最好使用小写字母开头的驼峰命名法(如my-event
在模板中监听时会自动转换为myEvent
)。
使用.sync
修饰符:虽然.sync
修饰符在Vue 2.x中用于简化父子组件之间的双向绑定,但在Vue 3.x中已被移除。在Vue 3中,推荐使用v-model
或自定义的prop和事件组合来实现类似的功能。
未完待续~~~