vue传参

1、通过props实现父子通信。

在父组件中的子组件标签上通过v-bind绑定数据，子组件通过props接收

father.vue

<templete>

　　<div>

　　　　<Son :resive="resive"/>

　　</div>

</templete>

<script>

　　import Son from "./son.vue"

　　export default{

　　　　data（）{

　　　　　　resive：xxxx

　　　　},

　　　　components:{

　　　　　　Son

　　　　}

　　}

</script>

 

Son.vue

<templete>

　　<div>

　　　　<button @click="useFatherData"></button>

　　</div>

</templete>

<script>

　　export default{

　　　　props：["resive"],

　　　　//使用传递过来的数据

　　　　methods：{

　　　　　　useFatherData(){

　　　　　　　　// this.resive即为传递过来的数据

　　　　　　}

　　　　}

　　}

</script>

 

2、通过props实现子父通信。

在父组件中的子组件标签上通过v-bind绑定函数，子组件通过props接收函数

father.vue

<templete>

　　<div>

　　　　<Son :resive="resive"/>

　　</div>

</templete>

<script>

　　import Son from "./son.vue"

　　export default{

　　　　methods:{

　　　　　　resicve(sonData){

　　　　　　　　//对接收到的xx进行操作，或者使用data中的数据接收

　　　　　　　　

　　　　　　}

　　　　},

　　　　components:{

　　　　　　Son

　　　　}

　　}

</script>

 

Son.vue

<templete>

　　<div>

　　　　<button @click="useFatherFunction"></button>

　　</div>

</templete>

<script>

　　export default{

　　　　data(){

　　　　　　return{

　　　　　　　　sonData，

　　　　　　}

　　　　}

　　　　props：["resive"],

　　　　//使用传递过来的函数同时进行参数的传递

　　　　methods：{

　　　　　　useFatherFunction(){

　　　　　　　　this.resive(this.sonData)   　　//xx为需要传递的参数

　　　　　　}

　　　　}

　　}

</script>

 

3、$emit实现子父通信

父组件中给子组件的实例vc上绑定一个自定义事件，子组件通过$emit触发函数并传递参数

father.vue

<templete>

　　<div>

　　　　//通过v-on直接绑定

　　　　<Son @xxxxxxxx="xxxx"/>

　　　　//通过 this.$refs.sonxxxx获取到子组件实例，再通过$on绑定

　　　　<Son ref="sonxxxx"/>

　　</div>

</templete>

<script>

　　import Son from "./son.vue"

　　export default{

　　　　methods:{

　　　　　　// 第一种

　　　　　　xxxx(sonData){

　　　　　　　　//对接收到的xx进行操作，或者使用data中的数据接收

　　　　　　}

　　　　},

　　　　mounted(){

　　　　　　// 绑定自定义名为xxxxxxxx，回调函数为xxxx的事件，

　　　　　　this.$refs.sonxxxx.$on("xxxxxxxx",this.xxxx)

　　　　}

　　　　components:{

　　　　　　Son

　　　　}

　　}

</script>

 

Son.vue

<templete>

　　<div>

　　　　<button @click="useFatherFunction"></button>

　　</div>

</templete>

<script>

　　export default{

　　　　data(){

　　　　　　return{

　　　　　　　　sonData，

　　　　　　}

　　　　}

　　　　//使用传递过来的函数同时进行参数的传递

　　　　methods：{

　　　　　　useFatherFunction(){

　　　　　　　　//触发绑定在子组件实例vc上的自定义方法，同时传递子组件的数据

　　　　　　　　this.$emit("xxxxxxxx",this.sonData);

　　　　　　},

　　　　　　//解绑自定义事件

　　　　　　unbind(){

　　　　　　　　//解绑一个自定义事件

　　　　　　　　this.$off('xxxxxxxx')；

　　　　　　　　//解绑多个自定义事件

　　　　　　　　this.$off(['xxxxxxxx','yyyyyyyy',......])；

　　　　　　　　//解绑全部自定义事件

　　　　　　　　this.$off();

　　　　　　}

　　　　},

　　　　

 

　　}

</script>

 

4、任意组件间的通信--全局事件总线

main.js

...

new Vue({

　　el:"#app",

　　render:h=>h(app),

　　//安装全局事件总线

　　beforeCreate(){

　　　　Vue.prototype.$bus=this

　　}

})

 

A.vue

接收数据，绑定自定义事件

<templete>

　　<div>

　　　　<button @click="resiveData"></button>

　　</div>

</templete>

<script>

　　export default{

　　　　//接收数据

　　　　methods：{

　　　　　　resiveData(){

　　　　　　　　//向bus上绑定自定义方法xxxxxxxx，同时接收数据

　　　　　　　　this.$bus.$on("xxxxxxxx",(data)=>{

　　　　　　　　　　//操作数据

　　　　　　　　});

　　　　　　},

　　　　},

　　　　beforeDestory(){

　　　　　　this.$bus.$off('xxxxxxxx')

　　　　}

　　}

</script>

 

B.vue

发送数据，触发事件

<templete>

　　<div>

　　　　<button @click="sendData"></button>

　　</div>

</templete>

<script>

　　export default{

　　　　data(){

　　　　　　return{

　　　　　　　　Data，

　　　　　　}

　　　　}

　　　　//传递数据

　　　　methods：{

　　　　　　sendData(){

　　　　　　　　//触发绑定在vm上的自定义方法，同时传递数据

　　　　　　　　this.$bus.$emit("xxxxxxxx",this.Data);

　　　　　　},

　　　　},

　　}

</script>

 

5、消息的订阅与发布库

以pubsub-js库举例，首先安装库,打开cmd，输入npm i pubsub-js回车

A.vue

订阅数据

<templete>

　　<div>

　　　　<button @click="resiveData"></button>

　　</div>

</templete>

<script>

import pubsub from "pubsub-js”

　　export default{

　　　　//订阅数据

　　　　methods：{

　　　　　　resiveData(){

　　　　　　　　// 只要出现xxxxxxx，就触发函数，函数有两个参数第二个参数才是接收的数据

　　　　　　　　pubsub.subscribe('xxxxxxxx',(xxxxxxxx,data)=>{

　　　　　　　　　　// 操作数据

　　　　　　　　})

　　　　　　},

　　　　},

　　}

</script>

B.vue

发送数据，触发事件

<templete>

　　<div>

　　　　<button @click="sendData"></button>

　　</div>

</templete>

<script>

import pubsub from "pubsub-js”

　　export default{

　　　　data(){

　　　　　　return{

　　　　　　　　Data，

　　　　　　}

　　　　}

　　　　//传递数据

　　　　methods：{

　　　　　　sendData(){

　　　　　　　　// 发布消息，传递数据

　　　　　　　　pubsub.publish('xxxxxxxx',this.Data);

　　　　　　},

　　　　},

　　}

</script>

 

6、VUEX...