vue 单项数据流 传送门
Vue 中不同的组件, 即使不存在父子关系也可以相互通信, 我们称为非父子关系通信
我们需要借助一个空 Vue 实例, 在不同的组件中, 使用相同的 Vue 实例来发送 / 监听事件, 达到数据通信的目的
Learn
一, 单项数据流
目录结构
[每个 demo 下方都存有 html 源码]
一, 单项数据流
定义组件 A 和组件 B, 组件 A 和组件 B 同级关系, 当点击 < template-a > 的 button 控件时, 调用 sendData 函数, 将 template-a 中的 data 数据发向 template-b
- <template id="template-a">
- <div>
- <h1>my-component-a</h1>
- comA name : <span>{{name}}</span><br />
- <button @click="sendData"> 发送数据给 comB</button>
- <hr />
- </div>
- </template>
- <template id="template-b">
- <div>
- <h2>my-component-b</h2>
- comB name : <span>{{nameB}}</span>
- <hr />
- </div>
- </template>
coma 绑定 template-a 模块组件, comb 绑定 template-b 模块组件, 要进行数据中转时候, 一定要注意 template-b 模块组件中的 this 关键字
- let comA = {
- template : "#template-a",
- data(){
- return {
- name : "AdataGary"
- }
- },
- methods : {
- sendData(){
- vm.$emit('send-event-a', this.name);
- }
- }
- }
- let comB = {
- template : "#template-b",
- data(){
- return {
- nameB : ''
- }
- },
- mounted(){
- /*vm.$on('send-event-a', function(value){
- console.log(this);
- this.nameB = value;
- });*/
- vm.$on('send-event-a', name => {
- console.log(this);
- this.nameB = name;
- })
- }
- }
在 Vue 中注册申请
- let vm = new Vue({
- data : {
- msg : 'Garydat'
- }
- });
- new Vue({
- data : {
- },
- components : {
- "my-component-a" : comA,
- "my-component-b" : comB
- }
- }).$mount("#GaryId");
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Gary
- </title>
- </head>
- <body>
- <div id="GaryId">
- <my-component-a>
- </my-component-a>
- <my-component-b>
- </my-component-b>
- </div>
- </body>
- <template id="template-a">
- <div>
- <h1>
- my-component-a
- </h1>
- comA name :
- <span>
- {{name}}
- </span>
- <br />
- <button @click="sendData">
- 发送数据给 comB
- </button>
- <hr />
- </div>
- </template>
- <template id="template-b">
- <div>
- <h2>
- my-component-b
- </h2>
- comB name :
- <span>
- {{nameB}}
- </span>
- <hr />
- </div>
- </template>
- <script type="text/javascript" src="../js/vue.js">
- </script>
- <script type="text/javascript">
- let comA = {
- template: "#template-a",
- data() {
- return {
- name: "AdataGary"
- }
- },
- methods: {
- sendData() {
- vm.$emit('send-event-a', this.name);
- }
- }
- }
- let comB = {
- template: "#template-b",
- data() {
- return {
- nameB: ''
- }
- },
- mounted() {
- /*vm.$on('send-event-a', function(value){
- console.log(this);
- this.nameB = value;
- });*/
- vm.$on('send-event-a', name = >{
- console.log(this);
- this.nameB = name;
- })
- }
- }
- let vm = new Vue({
- data: {
- msg: 'Garydat'
- }
- });
- new Vue({
- data: {},
- components: {
- "my-component-a": comA,
- "my-component-b": comB
- }
- }).$mount("#GaryId");
- </script>
- </HTML>
Gary_non-fatherAndSon.HTML
来源: http://www.bubuko.com/infodetail-2991127.html