vue通信方式汇总

vue 通信方式汇总

父级往子级通信 – props
parent:

  <template>
  <div>
    parent
    <child :msg="parentmsg"/>
  </div>
</template>

<script>
import Child from './Child';

export default {
  name: 'Parent',
  data() {
    return {
      parentmsg: 'this is msg from parent'
    }
  },
  components: {
    Child
  }
}
</script>

<style lang="scss" scoped>

</style>

child:

  <template>
	<div>
		child -- {{msg}}
	</div>
</template>

<script>
	export default {
		props: ['msg'],
		name: 'Child'
	}
</script>

<style lang="scss" scoped>

</style>

props

子级往父级通信 – $emit
parent:

<template>
  <div>
    parent <br>
    监听 子组件触发的 parentEvent 事件，通过 childEmitEvent 方法来处理
    <child @parentEvent="childEmitEvent" :msg="parentmsg"/>
    子组件传递过来的：{{childmsg}}
  </div>
</template>

<script>
import Child from './Child';

export default {
  name: 'Parent',
  data() {
    return {
      parentmsg: 'this is msg from parent',
      childmsg: ''
    }
  },
  components: {
    Child
  },
  methods: {
    //监听 子组件 出发的 parentEvent 事件 的处理方法，data为传参
    childEmitEvent(data) {
      this.childmsg = data;
    }
  },
}
</script>

<style lang="scss" scoped>

</style>

child:

<template>
	<div>
		child -- {{msg}}
		<input type="button" value="childbutton" @click="sendToParent"/>
	</div>
</template>

<script>
	export default {
		props: ['msg'],
		name: 'Child',
		methods: {
			sendToParent() {
				//触发 自定义的 parentEvent 事件，并传递一个字符串 'this is msg from child'
				//这样父级就可以通过on监听 child 触发的 parentEvent 事件，并通过自己的事件来处理 传递的参数
				this.$emit('parentEvent', 'this is msg from child')
			}
		},
	}
</script>

<style lang="scss" scoped>

</style>

$emit
注意：不能用 $on 侦听子组件释放的事件，而必须在模板里直接用 v-on 绑定
可是父子组件如何双向绑定呢？如何对于父子组件间的prop双向绑定其实官网里已经有里说明，
在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

1	this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据属性

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

vue提供了为这种模式提供一个缩写：.sync

1	<text-document v-bind:title.sync="doc.title"></text-document>

注意带有 .sync修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model

兄弟组件通信
两种方式：
通过前边的props ，$emit，通过父级组件作为介质相互通信
通过vue实例作为事件总线完成通信
注意： $emit 和 $on 只能作用在一个公共的实例上
eventBus:
1
2
import Vue from 'vue';
export default new Vue();

parent:

<template>
  <div>
    parent <br>
    <child />
    <child-c />
  </div>
</template>

<script>
import Child from './Child';
import ChildC from './ChildC';

export default {
  name: 'Parent',
  data() {
    return {

    }
  },
  components: {
    Child,
    ChildC
  },
  methods: {
    
  },
}
</script>

<style lang="scss" scoped>

</style>

child:

<template>
	<div>
		child
		<input type="button" value="childbutton" @click="send"/>
	</div>
</template>

<script>
import eventBus from '../eventBus';
	export default {
		name: 'Child',
		methods: {
			send() {
				eventBus.$emit('sendMsg','this is msg from child')
			}
		},
	}
</script>

<style lang="scss" scoped>

</style>

childc:

<template>
  <div>
    childc -- {{msg}}
    <input type="button" value="childcbutton">
  </div>
</template>

<script>
import eventBus from '../eventBus';
export default {
  data() {
    return {
      msg: ''
    };
  },
  name: "ChildC",
  mounted() {
    eventBus.$on('sendMsg',(data) => {
      this.msg = data;
    })
  }
};
</script>

<style lang="scss" scoped>
</style>

$emit,$on

子孙组件通信
provide和inject – 只能通信，不能响应式
vuex

对于provide和inject，官网介绍的很详细：
祖先：

provide: function () {
  return {
    getMap: this.getMap
  }
}

任何后代：

1	inject: ['getMap']

弊端：

祖先组件不需要知道哪些后代组件使用它提供的属性
后代组件不需要知道被注入的属性来自哪里

vuex状态管理方案，先不叙述了。

琉璃_心

vue通信方式汇总

vue 通信方式汇总