Todo List –vue学习手记

练习VUE编写的一个TodoList,记录学习过程中的一些手记。

1.搭建vue环境。

先检测是否安装node,vue-cli,vue create . 在当前目录下搭建vue环境,如果需要新建文件夹,.更换为文件夹名字。输入命令行后就等待下载安装,一般选择自动安装。最后等待提示 npm run serve ,输入指令,运行模拟本地终端。

2.组件的数据传递

1、同级组件是不可以传递数据的。如果同级组件需要数据互用,需要子组件数据传递给父组件,然后父组件在传递给子组件。

父组件通过props向下传递数据给子组件;子组件通过events给父组件发送信息。

2、组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板中直接饮用父组件的数据。要让子组件使用父组件的数据,需要通过子组件的 props 选项,简单来说,props就是子组件中用来接收父组件传递的数据。需要注意的是,对于props中声明的属性,在父组件中使用属性名时需要使用中划线命名法

3、props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改父组件的状态。所以不应该在子组件中修改 props 中的值,Vue 会报出警告。

3.自定义事件

子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件,event表示自定义的事件名,arg代表传递的参数
在子组件上自定义一个方法,同时把子组件的数据传递给父组件

vm.$on( event, fn );//监听event事件后运行 fn; 
父组件上监听子组件上自定义的方法,当监听事件触发后,接受子组件传递的数据,运行方法。

陈健的个人博客,记录生活所见所感、学习笔记。专注于Web前端_SEO教程_读书心得。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫