vue组件传值
子父组件传值,兄弟组件传值,vuex未补充!!
·
- 计算属性和方法的区别:计算属性中不会添加重复内容;方法添加会重复添加
- 生命周期中的销毁:普通的显示隐藏
v-show
并不是销毁,只是将元素隐藏ctrl+j
显示隐藏终端窗口
一、父给子传值(变量)
使用props直接写
- 在子页面使用props把变量暴露出去(可以是多个变量)
<template>
<div id="headermenu">
{{title}}
<img :src="logo" />//注意src也需要通过绑定!
</div>
</template>
<script>
export default {
name: "headermenu",
props: ["title", "logo"]
};
</script>
<style lang='less'>
</style>
- 在主页面的
data
函数中声明要传递的变量,直接使用v-bind
绑定到子组件上
data() {
return {
title:"首页",
logosrc:"https://www.baidu.com/img/baidu_jgylogo3.gif"
};
绑定到组件上
<headermenu :title="title" :logo="logosrc"></headermenu>
使用props进行类型约束
- 同理先在子页面中声明接受值的变量
<template>
<div id="headermenu">
{{title}}
<img :src="logo" />
{{num}}
</div>
</template>
<script>
export default {
name: "headermenu",
//直接声明
//props: ["title", "logo"]
//进行类型约束
props:{
title:String,
logo:String,
num:Number
}
};
- 在主页面(父页面)中声明变量的值并绑定到组件上
<headermenu :title="title" :logo="logosrc" :num="num"></headermenu>
data() {
return {
title:"首页",
logosrc:"https://www.baidu.com/img/baidu_jgylogo3.gif",
num:"100"
};
}
二、子给父传值(变量)
- 在父组件中声明一个变量准备接收传进来的值
<div>{{children}}</div>
- 通过父给子传值的方式让父元素给子元素传递当前对象
VueComponent
<contentmenu :parent="self"></contentmenu>
其中
self
是在data
中返回的this
(VueComponent
)
如果不返回,直接拿,vue中的this为
什么是proxy?
摘抄一段主要内容:
Proxy
对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。其实就是在对目标对象的操作之前提供了拦截,可以对外界的操作进行过滤和改写,修改某些操作的默认行为,这样我们可以不直接操作对象本身,而是通过操作对象的代理对象来间接来操作对象,达到预期的目的
- 在子组件中定义要接受父组件传来的parent
props: {
parent: Object
}
- 这样就可以直接在子组件中修改父组件的变量啦
<template>
<div id="contentmenu">
<button @click="sendtoBaba">给父亲传</button>
</div>
</template>
<script>
export default {
name: "contentmenu",
props: {
parent: Object
},
methods: {
sendtoBaba() {
//prop给父元素传值
console.log(this.parent);
this.parent.children = "我刚刚给过你啦!"
}
}
};
</script>
<style lang='less'>
</style>
三、父组件执行子组件的方法
- 父组件通过虚拟dom获取,就可以直接执行子组件的方法
<contentmenu ref="child"></contentmenu>
mounted() {
this.$refs.child.parentexm()
}
- 子组件中的方法为
parentexm() {
console.log("父亲也执行我了");
}
四、子组件执行父组件的方法
- 同理,因为已经获取过父组件,所以在子组件中直接调用方法
sendtoBaba() {//忽略这个名称,别被误导了这是写上面的东西时用的
this.parent.giveme();
}
- 父组件中的方法为
methods: {
giveme() {
console.log("儿子执行父亲!");
}
}
五、事件广播,事件车监听
非父组件传值方法一
监听先于传值(异步)=
vue2.0中可以使用
$emit, $on, $off
分别来分发(发送)、监听、取消监听
事件。官方明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口.
//调用$emit 方法
this.$root.eventHub.$emit('你的事件名字', 你的需要传送的数据)
接收方法(注意接收的事件名称要和发送的事件名称一致)
this.$root.eventHub.$on('你的事件名字', (传送的数据)=>{ handle(yourData) } )
6.本例中footer和content组件是非父子组件(同级兄弟组件)
- 新建emit.js文件,在其中引入vue,创建一个空的vue实例
//事件车
import Vue from 'vue';
const vue = new Vue();
export default vue;
- 在
content
组建中发送数据
import emit from '../emit/emit.js'
//省略框架……
methods: {
sendmsg(){
//发送广播
//参数:键值,数据
emit.$emit("msginfo","你是footer组件哦!")
}
}
- 在footer中接收
<template>
<div id="footmenu">底部</div>
</template>
<script>
import emit from "../emit/emit.js";
export default {
name: "footmenu",
mounted() {
//自动监听
emit.$on("msginfo", res => {
console.log(res);
});
}
};
</script>
六、子组件可以直接拿到父组件
mounted() {
console.log(this.$parent)
}
所以在之前子组件给父组件传值的时候就可以直接使用this.$parent
,而不是让父组件先把自身传进来
更多推荐
已为社区贡献1条内容
所有评论(0)