一,两种情况下vue更改数据不会响应
1.v-for渲染数据时,为数组中某一项直接赋值,数据不会响应。
![](https://img.haomeiwen.com/i6480241/815e1268e04859cd.png)
解决办法:调用Vue.set方法:(需在当前组件中引用vue)
![](https://img.haomeiwen.com/i6480241/96c757b1a9bb4679.png)
2,改变数组的长度,数据不会响应。
二,组件中props,$emit用法实例:
1.props
![](https://img.haomeiwen.com/i6480241/d8183a6d55da0bb8.png)
子组件中需要用到父组件中的参数,就需要用props属性来申明一些变量,去获取父组件中要传的值。
![](https://img.haomeiwen.com/i6480241/d6bf6909a3ab8dd3.png)
2.$emit
![](https://img.haomeiwen.com/i6480241/ad7d61c61ca349f1.png)
实例用法:
![](https://img.haomeiwen.com/i6480241/9781d835db50483f.png)
![](https://img.haomeiwen.com/i6480241/1d2bf7ddd9094f1a.png)
![](https://img.haomeiwen.com/i6480241/0f8b41d263500816.png)
三,slot插槽用法
父组件需要在子组件的标签内添加其他标签,子组件可在标签内加入<slot></solt>,那么父组件中添加的内容就会放在slot标签内。如图:
![](https://img.haomeiwen.com/i6480241/2cffba4594b824a6.png)
![](https://img.haomeiwen.com/i6480241/642e6b1ed04f7759.png)
![](https://img.haomeiwen.com/i6480241/25ae5208e1481ab4.png)
注:若子组件有多个插槽则可为每个插槽取个名字去匹配父组件中增加的标签。若匹配不到,则父组件中没匹配到的标签不显示。
四,v-bind绑定的值会随值的变化发生动态的响应
五,组件在调用的时候要将驼峰改为横线的写法,如comA改为<com-a>,标签中的属性,自定义事件最好也是小写加中线的模式
![](https://img.haomeiwen.com/i6480241/00bbd385dd9fdb77.png)
![](https://img.haomeiwen.com/i6480241/fae19b0361d16ce4.png)
六,v-model和v-on中可以添加修饰器,v-model.lazy和number,trim,以及v-on
七,transition动画在,v-show,v-if,component:is="aa",路由变化中生效,如果相同标签进行动画切换时,需要增加key属性进行区分,动画才生效。
![](https://img.haomeiwen.com/i6480241/40c3a93f7626afe0.png)
八,路由的三种写法
![](https://img.haomeiwen.com/i6480241/6c917b5ef59cbabc.png)
网友评论