黑马程序员技术交流社区

标题: 【上海校区】vue2.0 父子组件通信 兄弟组件通信 [打印本页]

---

作者: web前端田达    时间: 2018-5-11 10:56
标题: 【上海校区】vue2.0 父子组件通信 兄弟组件通信

父组件是通过props属性给子组件通信的来看下代码：

父组件：

<parent>    <child :child-com="content"></child> //注意这里用驼峰写法哦</parent>data(){    return {        content:'sichaoyun'    };}

子组件通过props来接受数据

第一种方法

props: [

第二种方法

props: {    childCom: String //这里指定了字符串类型，如果类型不一致会警告的哦}

第三种方法

props: {    childCom: {        type: String,        default: 'sichaoyun'     }}

---

子组件与父组件通信

vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据，废话少说，上干货

子组件代码

[url=][/url]
<template>    <div @click="open"></div></template>methods: {   open() {        this.$emit('showbox','the msg'); //触发showbox方法，'the msg'为向父组件传递的数据    }}[url=][/url]

父组件

[url=][/url]
<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法methods: {    toshow(msg) {        this.msg = msg;    }}[url=][/url]

---

兄弟组件之间的通信

我们可以实例化一个vue实例，相当于一个第三方

let vm = new Vue(); //创建一个新实例

组件他哥

<div @click="ge"></div>methods: {    ge() {        vm.$emit('blur','sichaoyun'); //触发事件    }}

组件小弟接受大哥命令

<div></div>created() {  vm.$on('blur', (arg) => {         this.test= arg; // 接收    });}

搞定！

文件转载于：https://www.cnblogs.com/sichaoyun/p/6690322.html

---

作者: 不二晨    时间: 2018-7-16 12:04
奈斯

---

作者: 吴琼老师    时间: 2018-7-18 15:13

---

作者: 不二晨    时间: 2018-7-18 15:16

吴琼老师 发表于 2018-7-18 15:13

奈斯，优秀

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2