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和事件组合来实现类似的功能。

未完待续~~~