vue组件之间通信方式汇总

方式1：props和$emit

props和$emit仅仅限制在父子组件中使用

1.props：父组件向子组件传递数据

1.1 代码展示
<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div>----------------------------------------------------------------------------------------------------<HelloWorld :age="age" msg="这是父组件的数据" :person="person"/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"}};},components: {HelloWorld},
}
</script>
<template><div><!-- 这是子组件 --><div>这是子组件，接收父组件的数据传递,age的值是:{{this.age}}</div><div>这是子组件，接收父组件的数据传递,person的值是:{{person.name}} --- {{person.address}}</div></div>
</template><script>
export default {name: 'HelloWorld',props:["age", "person"],}
</script>
1.2 过程分解

在这里插入图片描述

2.$emit：子组件向父组件传递数据

2.1 代码展示
<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div>父组件中接收子组件的数据fatherInfo的值是:{{this.fatherInfo}}</div>----------------------------------------------------------------------------------------------------<HelloWorld :age="age"  :person="person" @sendFather="reciveInfo"/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},components: {HelloWorld},methods: {reciveInfo(info) {this.fatherInfo = info;}}
}
</script>
<template><div><!-- 这是子组件 --><div>这是子组件，接收父组件的数据传递,age的值是:{{this.age}}</div><div>这是子组件，接收父组件的数据传递,person的值是:{{person.name}} --- {{person.address}}</div>----------------------------------------------------------------------------------------------------<div><button @click="sendMessage">子组件向父组件传递数据的按钮</button></div></div>
</template><script>
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},props:["age", "person"],methods: {sendMessage() {this.$emit("sendFather", this.info);}}}
</script>
2.2 过程分解


在这里插入图片描述

3.子组件改变父组件传入的props值的方式

3.1.1借助.sync实现
<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div>父组件中接收子组件的数据fatherInfo的值是:{{this.fatherInfo}}</div>----------------------------------------------------------------------------------------------------<HelloWorld :age.sync="age"  :person.sync="person"/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},components: {HelloWorld},methods: {reciveInfo(info) {this.fatherInfo = info;}}
}
</script>
<template><div><!-- 这是子组件 --><div>这是子组件，接收父组件的数据传递,age的值是:{{this.age}}</div><div>这是子组件，接收父组件的数据传递,person的值是:{{person.name}} --- {{person.address}}</div>----------------------------------------------------------------------------------------------------<div><button @click="sendMessage">用于修改props里面值的按钮</button></div></div>
</template><script>
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},props:["age", "person"],methods: {sendMessage() {this.$emit("update:age", 19);this.$emit("update:person", {name: "李四", address: "bbb"});}}}
</script>
3.1.2 过程分解

在这里插入图片描述
在这里插入图片描述

3.2.1借助v-model实现，该方式在表单提交中较为常用
<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div>父组件中接收子组件的数据fatherInfo的值是:{{this.fatherInfo}}</div>----------------------------------------------------------------------------------------------------<HelloWorld :age="age"  :person="person"/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},components: {HelloWorld},methods: {reciveInfo(info) {this.fatherInfo = info;}}
}
</script>
<template><div><!-- 这是子组件 --><div>这是子组件，接收父组件的数据传递,age的值是:{{this.age}}</div><div>这是子组件，接收父组件的数据传递,person的值是:{{person.name}} --- {{person.address}}</div>----------------------------------------------------------------------------------------------------<input v-model="age" placeholder="请输入年龄"/><input v-model="person.name" placeholder="请输入名称"/></div>
</template><script>
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},props:["age", "person"],methods: {sendMessage() {this.$emit("update:age", 19);this.$emit("update:person", {name: "李四", address: "bbb"});}}}
</script>
3.2.2 过程分解

在这里插入图片描述
在这里插入图片描述

3.3.1对于非基本数据类型，只改变其中某个属性的值，可以直接实现
<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div>父组件中接收子组件的数据fatherInfo的值是:{{this.fatherInfo}}</div>----------------------------------------------------------------------------------------------------<HelloWorld :age="age"  :person="person"/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},components: {HelloWorld},methods: {reciveInfo(info) {this.fatherInfo = info;}}
}
</script>
<template><div><!-- 这是子组件 --><div>这是子组件，接收父组件的数据传递,age的值是:{{this.age}}</div><div>这是子组件，接收父组件的数据传递,person的值是:{{person.name}} --- {{person.address}}</div>----------------------------------------------------------------------------------------------------<div><button @click="sendMessage">用于修改props里面值的按钮</button></div></div>
</template><script>
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},props:["age", "person"],methods: {sendMessage() {this.age = 19;this.person.name = "李四";}}}
</script>
3.3.2 过程分解

在这里插入图片描述
在这里插入图片描述

方式2：provide和inject

provide和inject在传递上比方式一更加的宽泛，当provide的组件上添加了，那么其后代都可以通过inject进行数据接收，不限制在父子组件之间

2.1代码展示

<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div>父组件中接收子组件的数据fatherInfo的值是:{{this.fatherInfo}}</div>----------------------------------------------------------------------------------------------------<HelloWorld/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},provide() {return {age : this.age,person: this.person}},components: {HelloWorld},methods: {reciveInfo(info) {this.fatherInfo = info;}}
}
</script>
<template><div><!-- 这是子组件 --><div>这是子组件，接收父组件的数据传递,age的值是:{{this.age}}</div><div>这是子组件，接收父组件的数据传递,person的值是:{{person.name}} --- {{person.address}}</div>----------------------------------------------------------------------------------------------------<Hello1 /></div>
</template><script>
import Hello1 from '@/components/Hello1.vue'
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},inject:["age", "person"],components: {Hello1}
}
</script>

<template><!-- 这是父组件 -->
<div ><div>这是孙组件，接收组件的数据传递,age的值是:{{this.age}}</div><div>这是孙组件，接收组件的数据传递,person的值是:{{person.name}} --- {{person.address}}</div>
</div>
</template><script>export default {
name: 'Hello1',
inject: ["age", "person"]}
</script>
<style></style>

2.2过程分解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.3provide和inject响应式写法

上面的写法有个问题，如果你只是针对非基本数据类型的某个属性进行修改，修改后所有的地方都会进行改变，但是改变基本数据类型后改变整个对象后，组件本身会改变，但是其他不会随之改变，会造成数据不一致问题。

2.3.1 问题展示
<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div>父组件中接收子组件的数据fatherInfo的值是:{{this.fatherInfo}}</div><div><button @click="change1">父组件中修改provide传递的值</button></div>----------------------------------------------------------------------------------------------------<HelloWorld/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},provide() {return {age : this.age,person: this.person}},components: {HelloWorld},methods: {change1() {this.age = 19;this.person.name = "李四";}}
}
</script>

在这里插入图片描述
在这里插入图片描述

2.3.2 解决方式
2.3.2.1 代码展示
<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div>父组件中接收子组件的数据fatherInfo的值是:{{this.fatherInfo}}</div><div><button @click="change1">父组件中修改provide传递的值</button></div>----------------------------------------------------------------------------------------------------<HelloWorld/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},provide() {return {age : () => this.age,person: () => this.person}},components: {HelloWorld},methods: {change1() {this.age = 19;this.person.name = "李四";}}
}
</script>
<template><div><!-- 这是子组件 --><div>这是子组件，接收父组件的数据传递,age的值是:{{this.age()}}</div><div>这是子组件，接收父组件的数据传递,person的值是:{{person().name}} --- {{person().address}}</div>----------------------------------------------------------------------------------------------------<Hello1 /></div>
</template><script>
import Hello1 from '@/components/Hello1.vue'
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},inject:["age", "person"],components: {Hello1}
}
</script>

<template><!-- 这是孙组件 -->
<div ><div>这是孙组件，接收组件的数据传递,age的值是:{{this.age()}}</div><div>这是孙组件，接收组件的数据传递,person的值是:{{person().name}} --- {{person().address}}</div>
</div>
</template><script>export default {
name: 'Hello1',
inject: ["age", "person"]}
</script>
<style></style>
2.3.2.2 过程分解

在这里插入图片描述
在这里插入图片描述

2.3.2.3 使用备注

当我们后代组件想修改inject接收的数据时，如果是响应式的书写方式，那么无法提供修改方式(可以通过下面的$listeners去源头进行修改)；如果是非响应式的书写，对于非基本数据类型来说，只是改变对象里面的某个属性是可以的，但是这种修改会很难知道是哪个组件对属性进行了修改，比较难以追踪，需要谨慎。其他的不建议修改，会造成数据不一致。

方式3：$parent和$children

这种方式很直接，将整个实例都获取去直接操作，$children是当前组件的直接子组件实例;$parent是当前组件的父组件实例，可以实现父组件及其后代组件上数据之间的传递。这种方式是获取组件本身的对象，与组件之间引用放置的顺序由很大关联，当改变组件引用的顺序时，需要同时修改获取原组件的下标，使用时需要谨慎考虑。

3.1代码展示

3.1.1 $children修改后代组件数据
<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div><button @click="change1">修改后代组件的值</button></div>----------------------------------------------------------------------------------------------------<HelloWorld/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},components: {HelloWorld},methods: {change1() {this.$children[0].info = "修改子组件的数据";this.$children[0].$children[0].count = "修改孙组件的数据";}}
}
</script>
<template><div><!-- 这是子组件 --><div>这是子组件,nfo的值是:{{this.info}}</div>----------------------------------------------------------------------------------------------------<Hello1 /></div>
</template><script>
import Hello1 from '@/components/Hello1.vue'
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},components: {Hello1},methods: {change2() {}}
}
</script>

<template><!-- 这是孙组件 -->
<div ><div>这是孙组件，count的值是:{{this.count}}</div></div>
</template><script>export default {
name: 'Hello1',
data() {return {count : "孙组件数据"}
}
}
</script>
<style></style>
3.1.2 过程分解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2.1 $parent修改先辈属性值
<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div>----------------------------------------------------------------------------------------------------<HelloWorld/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},components: {HelloWorld},methods: {change1() {this.$children[0].info = "修改子组件的数据";this.$children[0].$children[0].count = "修改孙组件的数据";}}
}
</script>
<template><div><!-- 这是子组件 --><div>这是子组件,nfo的值是:{{this.info}}</div>----------------------------------------------------------------------------------------------------<Hello1 /></div>
</template><script>
import Hello1 from '@/components/Hello1.vue'
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},components: {Hello1},methods: {change2() {}}
}
</script>

<template><!-- 这是孙组件 -->
<div ><div>这是孙组件，count的值是:{{this.count}}</div><div><button @click="change3">修改后先辈组件的值</button></div>
</div>
</template><script>export default {name: 'Hello1',data() {return {count : "孙组件数据"}},methods: {change3() {debugger;this.$parent.info ="修改直接父辈组件的值";this.$parent.$parent.age = 20;}},
}
</script>
<style></style>
3.2.2 过程分解

在这里插入图片描述

方式4：$ref和$refs

这种方式和方式三一样是获取组件实例本身去操作。在组件上添加一个ref属性，给与这个组件一个标志，通过该标志去获取组件本身的实例，相比较与方式三需要确定组件的引用顺序，该方式没有该苦恼，但是在给ref值的时候注意值不要重复。同时没有办法通过$ref去获取父类对象，这点是相比较于方式三的缺陷。

4.1代码展示

<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div><button @click="change1">修改后代组件的值</button></div>----------------------------------------------------------------------------------------------------<HelloWorld ref="helloWorld"/></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},components: {HelloWorld},methods: {change1() {debugger;this.$refs.helloWorld.info = "修改子组件的值";this.$refs.helloWorld.$refs.hello1.count = "修改孙组件的值";}}
}
</script>

<template><div><!-- 这是子组件 --><div>这是子组件,nfo的值是:{{this.info}}</div>----------------------------------------------------------------------------------------------------<Hello1 ref ="hello1"/></div>
</template><script>
import Hello1 from '@/components/Hello1.vue'
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},components: {Hello1},methods: {change2() {}}
}
</script>

<template><!-- 这是孙组件 -->
<div ><div>这是孙组件，count的值是:{{this.count}}</div>
</div>
</template><script>export default {name: 'Hello1',data() {return {count : "孙组件数据"}},methods: {},
}
</script>
<style></style>

4.2 过程分解

在这里插入图片描述
在这里插入图片描述

方式5：$attrs和$listeners

$attrs：包含了父作用域中没有被 prop 接收的所有属性（不包含class 和 style 属性）。这是其在使用是上的限制。在子组件中要通过这个去接收的条件。如果还要往下进行传递，需要v-bind来进行向下传递。自能是子类获取父类，同时只有定义出可以修改数据，中间传递组件无法修改值本身(可以通过下面的$listeners去源头进行修改)。

5.1 代码展示

<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div><button @click="change1">修改后代组件的值</button></div>----------------------------------------------------------------------------------------------------<HelloWorld ref="helloWorld" :age="this.age" :person="this.person" /></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},components: {HelloWorld},methods: {change1() {this.age = 19;this.person.name = "李四";}}
}
</script>
<template><div><!-- 这是子组件 --><div>子组件中的基本数据类型age的值是:{{this.$attrs.age}}</div><div>子组件中引用数据类型person的值是:{{this.$attrs.person.name}} --- {{this.$attrs.person.address}}</div><div><button @click="change2">修改后代组件的值</button></div>----------------------------------------------------------------------------------------------------<Hello1 ref ="hello1" v-bind="this.$attrs"/></div>
</template><script>
import Hello1 from '@/components/Hello1.vue'
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},components: {Hello1},methods: {change2() {this.$attrs.age = 19;}}
}
</script>

<template><!-- 这是孙组件 -->
<div ><div>孙组件中的基本数据类型age的值是:{{this.$attrs.age}}</div><div>孙组件中引用数据类型person的值是:{{this.$attrs.person.name}} --- {{this.$attrs.person.address}}</div>
</div>
</template><script>export default {name: 'Hello1',data() {return {count : "孙组件数据"}},methods: {},
}
</script>
<style></style>

5.2 过程分解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.3 $listeners的使用

$listnters:包含所有父组件中的 v-on 事件监听器 (不包含 .native 修饰器的)。其作用与$emit的功能相似。但是其可以不限制与父子组件之间来使用。
注意与.native进行区分，native是用于将原生事件绑定到特定组件中使用的

5.3.1代码展示
<template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div><div><button @click="change1">修改后代组件的值</button></div><div><Hello2 @click.native="handleTest3" /></div>----------------------------------------------------------------------------------------------------<HelloWorld ref="helloWorld" :age="this.age" :person="this.person" v-on="{handleTest1, handleTest2}" /></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
import Hello2 from '@/components/Hello2.vue'
export default {name: 'Home',data(){return {age : 18,person: {name: "张三",address: "aaa"},fatherInfo: ""};},components: {HelloWorld,Hello2},methods: {handleTest1(info) {console.log("有参数的传递处理{}", info);},handleTest2() {console.log("无参数的参数处理");},handleTest3() {console.log("原生的处理方式");}}
}
</script>
<template><div><!-- 这是子组件 --><div>子组件中的基本数据类型age的值是:{{this.$attrs.age}}</div><div>子组件中引用数据类型person的值是:{{this.$attrs.person.name}} --- {{this.$attrs.person.address}}</div><div><button @click="handle1">子类放在一个按钮来调用父类的handleTest1</button></div><div><button  @click="handle3">原生的处理方式</button></div>----------------------------------------------------------------------------------------------------<Hello1 v-bind="this.$attrs" v-on="$listeners"/></div>
</template><script>
import Hello1 from '@/components/Hello1.vue'
export default {name: 'HelloWorld',data() {return {info: "这是子组件的数据"}},components: {Hello1},methods: {handle1() {// 两种写法this.$listeners.handleTest1(this.info);this.$emit('handleTest1', this.info);},handle3() {// this.handleTest3();}}
}
</script>

<template><!-- 这是孙组件 -->
<div ><div>孙组件中的基本数据类型age的值是:{{this.$attrs.age}}</div><div>孙组件中引用数据类型person的值是:{{this.$attrs.person.name}} --- {{this.$attrs.person.address}}</div><button @click="handle2">子类放在一个按钮来调用父类的handleTest2</button>
</div>
</template><script>export default {name: 'Hello1',data() {return {count : "孙组件数据"}},methods: {handle2() {// 两种写法this.$listeners.handleTest2();this.$emit("handleTest2");}},
}
</script>
<style></style>

<!--  -->
<template>
<div ><button>用于测试native的使用</button>
</div>
</template><script>export default {
name: 'Hello2',
components: {},
data() {
return {}
},
computed: {},
watch: {},
methods: {},
created() {},
mounted() {},
}
</script>
<style></style>
5.3.2 过程分解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

方式6：Bus和vuex暂时不添加

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/732749.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

giffgaff怎么充值？giffgaff怎么续费？

giffgaff怎么充值？giffgaff怎么续费？

-性价比高&#xff1a;0月租&#xff0c;免费接收短信&#xff0c;充值一次&#xff0c;接码可以用20年以上&#xff08;仅需半年保号一次&#xff09;&#xff0c;可能是国内性价比最高的接码实体卡&#xff01;-安全&#xff1a;实体卡无须担心因号码被风控&#xff0c;还可以…
阅读更多...
springboot+vue，上传图片，回显，以及报错404的问题

springboot+vue，上传图片，回显，以及报错404的问题

最近遇到一个问题&#xff0c;上传图片到服务器以后&#xff0c;回显不了&#xff0c;报错404&#xff1b; 历时三天终于找到解决办法&#xff1a; 1.后端代码&#xff1a; RestController RequestMapping("file") SuppressWarnings({"unchecked","…
阅读更多...
面试经典150题【61-70】

面试经典150题【61-70】

文章目录 面试经典150题【61-70】61.旋转链表86.分隔链表104. 二叉树的最大深度100.相同的树226.翻转二叉树101.对称二叉树105.从前序与中序遍历序列构造二叉树106.从后序和中序遍历序列构造二叉树117.填充每个节点的下一个右侧节点指针II114.二叉树展开为链表 面试经典150题【…
阅读更多...
留学|谈PS|耶鲁大学管理学院招生办执行主任谈个人PS

留学|谈PS|耶鲁大学管理学院招生办执行主任谈个人PS

仅仅为了共同学习与分享 内容提要:在一篇个人自述中&#xff0c;我们要求申请人将他们的过去和未来有机地结合起来。我们把这种自传叫作“职业目标”自传。它为我们提供了确凿的信息&#xff0c;同时也可以确定申请人是否具有对自己及其职业的综合性反思能力。通常的情况是&am…
阅读更多...
PostgreSQL 流复制

PostgreSQL 流复制

文章目录 1.流复制介绍2.异步流复制2.1.主库部署2.2.备库部署2.3.测试 3.同步复制3.1.主库部署3.2.备库部署3.3.测试 4.主备切换 开源中间件 # PostgreSQLhttps://iothub.org.cn/docs/middleware/ https://iothub.org.cn/docs/middleware/postgresql/postgres-stream/1.流复制…
阅读更多...
Linux运维_Bash脚本_编译安装Mesa-23.3.6(OpenGL)

Linux运维_Bash脚本_编译安装Mesa-23.3.6(OpenGL)

Linux运维_Bash脚本_编译安装Mesa-23.3.6(OpenGL) Bash (Bourne Again Shell) 是一个解释器&#xff0c;负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件&#xff0c;并于 1989 年发布的免费软件&#xff0c;作为 Sh (Bourne Shell) 的替代品。 您可以在…
阅读更多...
为什么main方法在Java中代表主线程？

为什么main方法在Java中代表主线程？

main 方法在 Java 等编程语言中确实代表着程序的入口点&#xff0c;也就是程序开始执行的地方。当我们启动一个 Java 应用程序时&#xff0c;JVM&#xff08;Java 虚拟机&#xff09;会首先查找 main 方法&#xff0c;并从那里开始执行程序。 关于为什么 main 方法代表主线程&a…
阅读更多...
unity学习（53）——选择角色界面--分配服务器返回的信息

unity学习（53）——选择角色界面--分配服务器返回的信息

好久没写客户端了&#xff0c;一上手还不太适应 1.经过测试&#xff0c;成功登陆后&#xff0c;客户端请求list_request&#xff0c;成功返回&#xff0c;如下图&#xff1a; 可见此时model第三个位置的参数是1.也成功返回了所有已注册角色的信息。 2.之前已知创建的角色信息…
阅读更多...
141 Linux 系统编程18 ，线程，线程实现原理，ps –Lf 进程 查看

141 Linux 系统编程18 ，线程，线程实现原理，ps –Lf 进程 查看

一 线程概念 什么是线程 LWP&#xff1a;light weight process 轻量级的进程&#xff0c;本质仍是进程(在Linux环境下) 进程&#xff1a;独立地址空间&#xff0c;拥有PCB 线程&#xff1a;有独立的PCB&#xff0c;但没有独立的地址空间(共享) 区别&#xff1a;在于是否共…
阅读更多...
html前端的几种加密/解密方式

html前端的几种加密/解密方式

HTML前端的加密解密方式有以下几种&#xff1a; 一、base64加密 Base64编码&#xff1a;Base64是一种将二进制数据转换为可打印字符的编码方式。在前端&#xff0c;可以使用JavaScript的btoa()函数进行Base64编码&#xff0c;使用atob()函数进行解码。 var str "hello…
阅读更多...
uniapp发行H5获取当前页面query

uniapp发行H5获取当前页面query

阅读uni的文档大致可得通过 onLoad与 onShow()的形参都能获取页面传递的参数&#xff0c;例如在开发时鼠标移动到方法上可以看到此方法的简短介绍 实际这里说的是打开当前页面的参数&#xff0c;在小程序端的时候测试并无问题&#xff0c;但是发行到H5时首页加载会造成参数获取…
阅读更多...
掌握mysql，看完这篇文章就够了

掌握mysql，看完这篇文章就够了

1.mysql 学习数据库就是学习数据库管理系统&#xff08;一个数据管理系统可以管理多个数据库&#xff09; 安装 安装版本&#xff1a;mysql -installter -community-5.7.41.0.msl 流程 1.custom自定义安装 2.选择安装MySQl Server 5.7.41 - x64 3.默…
阅读更多...
c++ 常用新特性总结【c++11】，【c++14】，【c++17】，【c++20】

c++ 常用新特性总结【c++11】，【c++14】，【c++17】，【c++20】

文章目录 常用的c11新特性1.自动推导类型(auto)2.lambda表达式3.智能指针4.范围for循环5.右值引用 - 移动语义6.类型别名7.constexpr8.static_assert(静态断言)9.nullptr10.列表初始化11.继承构造函数12.显示虚函数重载(override)13.final14.变长模板参数15.新的容器与算法16.强…
阅读更多...
代码随想录算法训练营第四十八天|583. 两个字符串的删除操作，72. 编辑距离

代码随想录算法训练营第四十八天|583. 两个字符串的删除操作，72. 编辑距离

系列文章目录 代码随想录算法训练营第一天|数组理论基础&#xff0c;704. 二分查找&#xff0c;27. 移除元素 代码随想录算法训练营第二天|977.有序数组的平方 &#xff0c;209.长度最小的子数组 &#xff0c;59.螺旋矩阵II 代码随想录算法训练营第三天|链表理论基础&#xff…
阅读更多...
第三方神秘顾客调查：如何选择专业的营业厅神秘顾客公司

第三方神秘顾客调查：如何选择专业的营业厅神秘顾客公司

选择专业的营业厅神秘顾客公司时&#xff0c;确实需要考虑多个因素&#xff0c;以确保您合作的公司能够为您提供高质量的服务和有价值的反馈。以下是选择营业厅神秘顾客公司时应考虑的关键因素&#xff1a; 1、公司声誉与经验&#xff1a;选择在行业内有良好声誉和丰富经验的神…
阅读更多...
内容管理平台原来这么好用，优秀企业必备

内容管理平台原来这么好用，优秀企业必备

内容管理平台是企业的强有力支持者&#xff0c;它可以使企业对旗下的各种网站、应用和其他数字内容进行集中管理&#xff0c;有效提高工作效率。对于企业的运营、市场推广和客户服务等各方面都有着重要的影响。今天&#xff0c;我们就来推荐三款值得尝试的内容管理平台。 首先…
阅读更多...
论文的引用书写方法

论文的引用书写方法

前置操作 1、全选文献 2、在开始选项卡 段落功能区 选择编号功能 3、设置编号格式 [1] 论文的引用 1、光标放在需要引用论文的地方 2、选择引用选项卡 点击交叉引用 3、引用类型为编号项 引用内容为段落编号 选择需要的第几条参考文献
阅读更多...
备战蓝桥杯---动态规划的一些思想2

备战蓝桥杯---动态规划的一些思想2

话不多说&#xff0c;直接看题&#xff1a; 1.换根DP&#xff1a; 我们肯定不能对每一个根节点暴力求&#xff0c;我们不妨先求f[1]&#xff0c;我们发现当他的儿子作为根节点时深度和为f[1](n-cnt[i])-cnt[i](cnt[i]表示以i为根的节点数&#xff09;&#xff0c;这样子两遍DFS…
阅读更多...
论文阅读：Diffusion Model-Based Image Editing: A Survey

论文阅读：Diffusion Model-Based Image Editing: A Survey

Diffusion Model-Based Image Editing: A Survey 论文链接 GitHub仓库 摘要 这篇文章是一篇基于扩散模型&#xff08;Diffusion Model&#xff09;的图片编辑&#xff08;image editing&#xff09;方法综述。作者从多个方面对当前的方法进行分类和分析&#xff0c;包括学习…
阅读更多...
Python exec 函数解析：探索动态代码执行的无限可能！

Python exec 函数解析：探索动态代码执行的无限可能！

在 Python 中&#xff0c;exec() 是一个内置函数&#xff0c;用于执行储存在字符串或文件中的 Python 代码。这个函数的灵活性使得它在某些情况下成为一种有用的工具&#xff0c;但也因为其潜在的安全风险而需要谨慎使用。本文将深入探讨 exec() 函数的使用方法、注意事项以及适…
阅读更多...
最新文章

Copyright @ 2022~2023