使用props:
在要传数据的目标组件标签上写一个变量=“” 若是传数据源的数据要在变量前加上:变量=‘’这样传过去的就是一个变量 不然是字符串
如下代码
<Box :msg="msg"></Box>
<script>
data(){
retuen { msg="123" }
}
</script>
在Box组件接收数据"
props:[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 :最多缓存几个