后端java工程师自学前端Vue element-ui第N天
1.Vue的路由
VUE的路由指的是组件之间的跳转,是组件之间,而不是像网址那样的超链接。组件的内容放在<router-view></router-view>中 如果需要像超链接那样跳转 请使用<router-link to=组件名字></router-link>
1.1 嵌套路由
是在组件的内部又跳转另一个组件。路由表router.js中使用children来实现
2.VUE对象
VUE对象中的data属性用于存放数据,在html 标签中任何使用了:地方,都需要从VUE的data,computed,props对象里面去找数据,:表示该属性是个绑定属性 。methods用于存放方法
3.VUE父子组件传值
3.1 父传子
首先子组件在暴露时,需要增加props属性,用于接收父组件传过来的值。子组件在props里面规定了什么属性名字,父组件在传值时也就只能传这个名字
父组件使用子组件时,通过:test=‘msg’ 来给子组件的test属性传值,值为父组件中的msg对象。
子组件使用父组件传过来的值市,直接以{ {属性名}}使用即可。如{ {test}}
3.2 子传父
子传父通过发送消息的方式---$emit 个人认为是有点类似发送一个广播 this.$emit("方法名","传递给父组件的数据") 就相当于发一个广播 然后后面是参数 有点类似android中的BroadCast组件
首先子组件在暴露时,就要在自己的内部定义一个事件,这个事件和普通的事件没什么不一样,比如子组件的一个点击事件,然后在点击时通过this.$emit("方法名","传递给父组件的数据") 给外面的父组件发送广播。发送消息。
父组件在使用子组件时,就要注册该广播,也就是要监听该消息。类似于下面这中,使用@后面是一个字符串,这个字符串就是子组件中要广播的那个字符串,必须保持一致,才行
然后父组件中对应的fun使用一个参数来接受子组件传递上来的参数即可
缺点 耦合性太大 大项目推荐使用VUEX来进行状态管理
2.Element-UI的Form表单 和table表格
Form表单绑定数据用v-model来实现,表单验证用prop属性 table绑定数据用:data 列名用lable
3.VUE的插槽 slot
当把一个组件封装好以后,组件内的template的模板已经被固定了。如果在使用它时,在它的标签内部又加了一些 html内容 ,这部分内容就会加到slot里面去。
