vue父子兄传值理解
父传子
总结:引入、注册、调用、传值,子组件props接收
引入子组件
import son from “./son.vue”;
components中注册子组件
components: {
son,
}
使用子组件并且将数据传递给子组件
子组件接收数据,接收方法2种
props:[‘myname’]
props: {
myname: {
type: String,
required: true,
},
},
子传父
总结:子组件通过事件操作 使用$emit传递数据
子组件定义绑定按钮,绑定点击事件
子组件使用this.$emit(‘自定义事件类型’,需要传递的数据) 将数据传给父组件
tellFather() {
this.$emit("tellToFather", this.mygfName);
},
父组件监听事件,接收数据
注意:监听的方法必须和子组件的命名相同
兄弟传值
总结:兄弟之间无法直接传值,可以通事件总线方法传递 (以下方法就是事件总线)
- 需将所有兄弟组件嵌套入父组件处,操作走第一大步(引入,注册,调用)
创建公共vue实例,并引入(由于this指向问题,需要创建一个公共vue实例来实现事件发出的监听问题) 创建一个js文件放下面的代码 在两个子组件中都要引入这个文件 常规命名为:eventBus.js 引入的时候命名为bus,所以下面使用的是bus.$on
import Vue from “vue”;
export default new Vue();
son组件创建按钮绑定点击事件,将数据传递出去
methods: {
tellBorder() {
bus.$emit("tellToborder", this.mygfName);
},
},
border组件中在mounted中进行监听事件(因为不知道事件什么时候触发,所以需要界面渲染就开始监听,使用bus.$on)
mounted() {
bus.$on("tellToborder", (data) => {
this.sonGFname = data;
});
},
还没有评论,来说两句吧...