[JavaScript知识库]Vue--组件数据传递与组件切换

使用Prons:

在要传数据的目标组件标签上写一个变量=“”? 若是传数据源的数据要在变量前加上:变量=‘’这样传过去的就是一个变量 不然是字符串
如下代码

<Box :msg="msg"></Box>

<script>
   data(){
      retuen { msg="123" }
}
 
</script>

在Box组件接收数据"

prons:[msg]

这样就可以把msg当做数据直接使用

$parent

$parent 在子组件中使用this.$parent可以获取父组件信息

this.$parent.a1=124 可以把父组件中名为a1的数据内容改成124

this.$chilren可以选择子组件 但是无法判断子组件先后顺序?

?$ref

获取元素节点 如<div ref="div1" class="div1"></div>

var div1=this.$refs.div1 就能获取这个节点

就能在函数中对他进行dom操作 一般在mounted中执行

v-on="$listeners"

父组件A，子组件B，孙组件C。

C组件中emit事件后，在B中可以直接使用v-on="$listeners"接收，此时可以在A组件中的B上直接使用C中emit出来的事件。

Box2:this.$emit("x","box2修改了数据") ? ?Box1:v-on="$listeners" ? Box:"@x="changex"" ?changex(val){log(val)} val="box2修改了数据"

v-bind="$attrs"

?父组件A，子组件B，孙组件C。

?A上设置值，若没在B上用props进行接收，则可以直接在B中的C设置v-bind="$attrs"，此时相当于把属性直接设置在C上。

v-model数据传输

----父组件在子组件标签上<Box v-model="msg"></Box>### 子组件用prons接收value ?然后就能当数据使用

组件切换

<component :is="myevent"></component> 当myevent=Box 就加载Box组件 可以用函数切换myevent的值从而切换组件

切换组件时会每次都会经历声明周期函数 创造到摧毁

用<keep-alive><component></component></keep-alive> keep-alive把component标签嵌套起来 切换时就不会创造摧毁 ?但是也导致了不能在mounted挂载时触发事件

缓存钩子函数

activated:加了keep-alive也会执行 只能用在keep-alive中 切换到当前组件时执行

deacticated:和activeted一样但是 当前组件被切换时执行

缓存钩子可以用来做网络请求

keep-alive属性 include:缓存哪些组件可以写组件名也可以写正则 ?exinclude:哪些不缓存 ?max :最多缓存几个