Vue父子组件通信props、$emit

制作一个日程表，也类似一个便签。有待办事件和回收站两个按钮，点击按钮对两个页面之间进行切换，采用vue模板，组件化开发的方式，不再是在一个页面中将html、css、javascript全部写入的方式了。

• 由于是简单的项目，没有使用到vue-cli进行快速的项目搭建。而是使用到了nodejs环境。首先在node官网下载最新安装程序安装node.js
• 命令行使用以下命令看看是否安装成功，安装成功显示版本
• 

•  然后输入以下命令安装http-server

• 
• 安装好后命令行进入项目根目录执行以下命令
• 

   

   

• 按照图中的网址浏览器访问就可以预览调试了 

 

项目运行效果图

 

 

 

父子组件传值要点总结

1. 父组件在给子组件传值时，子组件利用props{值}接收父组件的值，而父组件是通过使用时在标签里通过vue的v-bind:子值=“父值”绑定父组件的值到子组件身上
2. 子组件给父组件传值，夫组件通过自定义事件，@自定义事件=“”接受值，子组件利用事件this.$emit('事件',val);向父组件传值