vue组件之间的通信

父组件 ---> 子组件
属性props
在子组件调用时给子组件写入属性，在子组件内部用props注册后，会添加到子组件的实例上
在子组件中不能直接修改props的传入值
只能时父组件传给子组件，不能‘隔代‘
父组件：HelloWord
<template>
  <div class="hello">
    <!-- 使用自组件 -->
    <child :message="msg"> </child>
  </div>
</template>

<script>
import child from ‘./Children1.vue‘

/* eslint-disable */
export default {
  name: "HelloWorld",
  components: {child},
  data() {
    return {
      msg: "这是一个父组件的信息",
    }
  },
};
</script>


子组件:child
<template>
  <div id="child">
    <a href="www.baidu.com/">{{message}}</a>
  </div>
</template>

<script type="text/javascript">
/* eslint-disable */
export default {
  // name: "child",
  props: [‘message‘],
};
</script>

效果：

特性$attrs
解决了props ‘隔代‘ 传值时反复注册props的弊端
组件是在调用时写入属性
// 子组件：child
<template>
  <div id="child">
    <p>{{$attrs.message}}</p>
  </div>
</template>

<script type="text/javascript">
/* eslint-disable */
export default {}
</script>

效果：

$refs
通过调用子组件函数，然后进行处理
// 父组件: HelloWorld
<template>
  <div class="hello">
    <!-- 使用自组件 -->
    <!-- <child1 :message="msg"></child1>
    <child2></child2> -->
    <child3 ref="child3"></child3>
  </div>
</template>

<script>
import child1 from ‘./Child1.vue‘
import child2 from ‘./Child2.vue‘
import child3 from ‘./Child3.vue‘

/* eslint-disable */
export default {
  name: "HelloWorld",
  components: {child1, child2, child3},
  data() {
    return {
      msg: "这是一个父组件的信息, 但是我要显示在子组件上",
    }
  },
  mounted() {
    this.$refs[‘child3‘].fun(this.msg);
    console.log(this.$refs.child3);
    console.log(this.$refs.child3.msg);
  }
};
</script>



// 子组件：Child
<template>
  <div>{{childMsg}}</div>
</template>
<script>
/* eslint-disable */
export default {
  data: function() {
    return {
      msg: ‘我是子组件的msg‘,
      childMsg: ‘‘,
    }
  },
  methods: {
    fun(str) {
      console.log(str);
      this.childMsg = str;
    }
  },
}
</script>

效果：

$children
通过调用子组件函数，然后进行处理
// 父组件: HelloWorld
<template>
  <div class="hello">
    <!-- 使用自组件 -->
    <!-- <child1 :message="msg"></child1>
    <child2></child2> -->
    <child3 ref="child3"></child3>
  </div>
</template>

<script>
import child1 from ‘./Child1.vue‘
import child2 from ‘./Child2.vue‘
import child3 from ‘./Child3.vue‘

/* eslint-disable */
export default {
  name: "HelloWorld",
  components: {child1, child2, child3},
  data() {
    return {
      msg: "这是一个父组件的信息, 但是我要显示在子组件上",
    }
  },
  mounted() {
    this.$children[0].fun(this.msg);
    console.log(this.$children[0]);
    // console.log(this.$refs.child3);
    // console.log(this.$refs.child3.msg);
  }
};
</script>



// 子组件：Child
<template>
  <div>{{childMsg}}</div>
</template>
<script>
/* eslint-disable */
export default {
  data: function() {
    return {
      msg: ‘我是子组件的msg‘,
      childMsg: ‘‘,
    }
  },
  methods: {
    fun(str) {
      this.childMsg = str;
    }
  },
}
</script>


子组件 ---> 父组件
通过自定义事件$emit
// 父组件: HelloWorld
<template>
  <div class="hello">
    <!-- 使用自组件 -->
    <!-- <child1 :message="msg"></child1>
    <child2></child2>-->
    <!-- <child3 ref="child3"></child3> -->
    <child4 @getmsg="fun"></child4>
    <p>{{childMsg}}</p>
  </div>
</template>

<script>
/* eslint-disable */
import child1 from "./Child1.vue";
import child2 from "./Child2.vue";
import child3 from "./Child3.vue";
import child4 from "./Child4.vue";

export default {
  name: "HelloWorld",
  components: { child1, child2, child3, child4 },
  data() {
    return {
      msg: "这是一个父组件的信息, 但是我要显示在子组件上",
      childMsg: ‘‘,
    };
  },
  mounted() {
    // this.$children[0].fun(this.msg);
    // console.log(this.$children[0]);
    // console.log(this.$refs.child3);
    // console.log(this.$refs.child3.msg);
  },
  methods: {
    fun: function(s) {
      this.childMsg = s;
    }
  }
};
</script>




// 子组件：Child
<template>
  <div>{{childMsg}}</div>
</template>
<script>
/* eslint-disable */
export default {
  data: function() {
    return {
      msg: "我是子组件的msg",
      childMsg: ""
    };
  },
  mounted: function() {
    console.log(this.$emit("getmsg", this.msg));
    // this.childMsg = this.$emit("getmsg", this.msg);
  }
};
</script>

效果：


兄弟组件通过共同父辈组件搭桥
$parent
$root
$children
$emit
其他方法和$emit类似，仅写一个例子
// common
<template>
  <div class="c">
    <h3>事件链传递数据</h3>
    <appA :msg-from-b="msgFromB" @msg-a-change="aSay"></appA>
    <appB :msg-from-a="msgFromA" @msg-b-change="bSay"></appB>
  </div>
</template>

<script>
/* eslint-disable */
import A from ‘./A‘
import B from ‘./B‘
export default {
  data: function() {
    return {
      msgFromA: ‘A 还没说话‘,
      msgFromB: ‘B 还没说话‘,
    }
  },
  methods: {
    aSay: function(msg) {
      this.msgFromA = msg;
    },
    bSay: function(msg) {
      this.msgFromB = msg;
    },
  },
  components: {
    appA: A,
    appB: B,
  }
}
</script>


// A
<template>
  <div>
    <h3>A模块</h3>
    <p>B说： {{msgFromB}}</p>
    <button @click="aSay">A 把自己的信息传给B</button>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data: function() {
    return {
      msg: "我是A"
    };
  },
  methods: {
    aSay: function() {
      this.$emit("msg-a-change", this.msg);
    }
  },
  props: ["msgFromB"]
};
</script>


// B
<template>
  <div>
    <h3>B模块</h3>
    <p>A说： {{msgFromA}}</p>
    <button @click="bSay">B 把自己的信息传给B</button>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data: function() {
    return {
      msg: ‘我是B‘,
    }
  },
  methods: {
    bSay: function() {
      this.$emit(‘msg-b-change‘, this.msg);
    }
  },
  props: [‘msgFromA‘],
}
</script>

效果：




隔代传递
$attrs
如上文
provide/inject
 上辈组件provide
子孙组件inject
// 组件长辈/子辈顺序： App--->HelloWorld--->child4,所示例子中是App中provide,在child4中inject
// App
<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <!-- <router-view/> -->
    <Hello></Hello>
    <Com></Com>
  </div>
</template>

<script>
/* eslint-disable */
import Hello from "./components/HelloWorld";
import Com from "./components/brother/Common";

export default {
  name: "app",
  provide() {
    return {
      rootMsg: ‘根信息‘,
    }
  },
  components: {
    Hello,
    Com
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>



// 子孙组件inject
<template>
  <div>
    {{childMsg}}
    <p>{{rootMsg}}</p>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  data: function() {
    return {
      msg: "我是子组件的msg",
      childMsg: "",
      child4Msg: ‘child4Msg......‘,
    };
  },
  inject: [‘rootMsg‘],
};
</script>

效果：
　https://note.youdao.com/web/#/file/WEB1e40c3ee5241312ee63dc8c180aa2973/note/WEBd925acc08e1b9a82e5803c641345b4da/