7.26

104 阅读2分钟

return break continue区别

return:直接返回函数,跳出整个函数体。
break:跳出整个循环,继续执行循环外代码。
continue:跳出本次循环,继续下一次迭代循环。

vue中的组件传值

vue中组件之间的传值情况主要有以下三种:
-   父组件向子组件传值。
-   子组件向父组件传值。
-   兄弟组件之间相互传值或者是两个没有关系的组件之间的传值。

父组件向子组件传值

这种情况是三种传值方案中最简单的, 通过在子组件中使用 props就可以实现

子组件向父组件传值

在子组件向父组件传值时需要使用 vue 中的 $on$emit ,使用$emit 可以触发 $on 中监听的事件

兄弟组件之间的传值

兄弟组件之间传值有两种方式:
1.  将需要改变的值放到父组件中,子组件通过props来获取父组件的值
2.  通过eventbus 来实现兄弟组件之间的传值,其原理还是通过$on$emit来时实现的,
区别是现在全局建立一个空的vue对象,然后将事件绑定到该空对象上,最后通过该空对象来触发$on监听的事件 

vue中如何动态绑定Class和Style

1. 数据绑定

vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下:
<a v-bind:href="http://www.cnblogs.com/">博客园首页</a>
简写:
<a :href="http://www.cnblogs.com/">博客园首页</a>

2. 动态绑定class

vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量,
可以通过 class="{{ className }}" 方式设置class,
但是vue不推荐这种方式与 v-bind:class 的方式混用,
二者只能选其一。v-bind:class 虽然与class属性里绑定变量的方式不能共存,
却可以与原生的class特性共存, 一个DOM标签中允许同时出现原生class和v-bind:class