标签：引用 code button https cli col http sdn 接收
1.子父组件
父组件：
bind绑定传值，on事件接收
<componentName :keyName = "数据" @keyName = "事件名"/>
1 <switchTempDialog :switchTempShow.sync=‘switchTempShow‘ 2 :selectPoint=‘selectPoint‘ 3 @closeCb=‘closeCb‘> 4 </switchTempDialog>
子组件：
props：{ keyName : types }接收， emit.( 事件名，params）触发
1 props: { 2 dialogVisible: Boolean, 3 selectPoint: Object, 4 isPoint: { 5 type: Boolean, default: true 6 } 7 }, 8 ... 9 10 this.$emit("update:dialogVisible", this.dialogVisible); 11 this.$emit("closeCb");
2.兄弟组件或非父子组件通信
bus总线传值
将bus挂载到vue.prototype上,相当于给vue添加一个原型链属性，如果该属性为引用类型，则相当于添加了一个全局变量。
// plugin/index.js import Bus from ‘vue‘; let install = function (Vue) { ... ... // 设置eventBus Vue.prototype.bus = new Bus(); ... ... } export default {install}; // main.js import Vue from ‘vue‘; import plugin from ‘./plugin/index‘; ... ... Vue.use(plugin); ... ...
组件一定义：
this.bus.$on(‘updateData‘, this.getdata);
组件二调用：
this.bus.$emit(‘updateData‘, {loading: false});
注意：注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况
1 beforeDestroy () { 2 this.bus.$off(‘updateData‘, this.getData); 3 }
3.vuex全局状态管理
4.借助vue.prototype设置全局变量
https://blog.csdn.net/pma934/article/details/86765722
5.$attr和$listen 跨越组件通信
父组件
<template>
<div>
<index1 :foo="foo"
:coo="coo"
@toSky="toSky"></index1>
</div>
</template>
<script>
// import index1 from "@/pages/index1"
export default {
data () {
return {
foo: ‘普通通信‘,
coo: ‘跨组件通信‘
}
},
components: {
index1: () => import(‘@/pages/index1‘)
// index1: resolve => { require([‘@/pages/index1‘]), resolve }
},
methods: {
toSky (params) {
console.log(params)
}
}
}
</script>
子组件
<template>
<div>
<p>{{foo}}</p>
<index2 v-bind="$attrs"
v-on="$listeners"></index2>
</div>
</template>
<script>
export default {
data () {
return {
}
},
components: {
index2: () => import(‘@/pages/index2‘)
},
props: [
"foo"
],
// 取消把 $attrs 对象上没在子组件 props 中声明的属性加在子组件的根 html 标签上
inheritAttrs: false,
}
</script>
孙组件
<template>
<div>
<p>coo:{{coo}}</p>
<button @click="toSky">我要上天</button>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props: [‘coo‘],
inheritAttrs: false,
methods: {
toSky () {
this.$emit("toSky", "上天啦")
}
}
}
</script>
标签：引用 code button https cli col http sdn 接收
原文地址：https://www.cnblogs.com/vancissell/p/12961994.html
