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;还可以…
阅读更多...
面试经典150题【61-70】

面试经典150题【61-70】

文章目录 面试经典150题【61-70】61.旋转链表86.分隔链表104. 二叉树的最大深度100.相同的树226.翻转二叉树101.对称二叉树105.从前序与中序遍历序列构造二叉树106.从后序和中序遍历序列构造二叉树117.填充每个节点的下一个右侧节点指针II114.二叉树展开为链表 面试经典150题【…
阅读更多...
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.流复制…
阅读更多...
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时首页加载会造成参数获取…
阅读更多...
内容管理平台原来这么好用，优秀企业必备

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

内容管理平台是企业的强有力支持者&#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;包括学习…
阅读更多...
微信小程序-可以用区域

微信小程序-可以用区域

简介 movable-view和movable-area是可移动的视图容器&#xff0c;在页面中可以拖拽滑动。 本篇文章将会通过该容器实现一个常用的拖拽按钮功能。 使用效果 代码实现 side-view.wtml 布局见下面代码&#xff0c;left view为内容区域&#xff0c;right view为操作按钮&a…
阅读更多...
【初中up主分享】自己动手，丰衣足食！看我打造的下载利器！

【初中up主分享】自己动手，丰衣足食！看我打造的下载利器！

代码如下&#xff1a; import os.path import tkinter as tk import tkinter.ttk as ttk import tkinter.filedialog as tf import pytube from urllib.error import URLError import tkinter.messagebox as tm import requests import io from PIL import ImageTk, Image imp…
阅读更多...
软件测试自学和报班学习的区别，各有各的优势和缺点，大家看完之后自己选择喔

软件测试自学和报班学习的区别，各有各的优势和缺点，大家看完之后自己选择喔

时代在进步&#xff0c;人们汲取知识的方式不再是单一的在书本上面&#xff0c;现在网络发达&#xff0c;只需要上网就能找到相关的好多知识&#xff0c;慢慢的大家越来越觉得有了这些知识&#xff0c;只要自己有自制力就完全能够自学到一定的程度。 在自学氛围的影响下&#…
阅读更多...
【Python】科研代码学习：五 Data Collator，Datasets

【Python】科研代码学习：五 Data Collator，Datasets

【Python】科研代码学习&#xff1a;五 Data Collator&#xff0c;Datasets Data CollatorDefault data collatorDefaultDataCollatorDataCollatorWithPaddingPadding 其他 Data Collator Datasetsload_dataset其他一些基本操作 Data Collator HF官网API&#xff1a;Data Coll…
阅读更多...
抖音短视频素材哪里找，推荐五个好用的抖音素材网站

抖音短视频素材哪里找，推荐五个好用的抖音素材网站

不知道你有没有想过一个问题&#xff0c;为什么别人都能找到那种高质量的视频素材&#xff0c;画质特别高清&#xff0c;甚至是4K的内容&#xff0c;而你需要视频素材却不知道去哪里找&#xff1f;网上有各种参差不齐的网站&#xff0c;变着法的想掏空你那本不富裕的腰包。今天…
阅读更多...
springMVC自定义异常处理器

springMVC自定义异常处理器

目录 &#x1f331;使用原因 &#x1f333;优点 &#x1f331;实现 &#x1f333;自定义一个异常 &#x1f333;异常处理 &#x1f333;测试 使用原因 系统中会有各种各样的&#xff0c;意料之中和意料之外的结果&#xff0c;我们并不能做到完全针对每个异常时刻做出针对…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Marquee）

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Marquee）

跑马灯组件&#xff0c;用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动&#xff0c;不超过时不滚动。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Ma…
阅读更多...
数据结构从入门到精通——队列

数据结构从入门到精通——队列

队列 前言一、队列1.1队列的概念及结构1.2队列的实现1.3队列的实现1.4扩展 二、队列面试题三、队列的具体实现代码Queue.hQueue.ctest.c队列的初始化队列的销毁入队列出队列返回队头元素返回队尾元素检测队列是否为空检测元素个数 前言 队列是一种特殊的线性数据结构&#xff…
阅读更多...
Python 初步了解urllib库：网络请求的利器

Python 初步了解urllib库：网络请求的利器

目录 urllib库简介 request模块 parse模块 error模块 response模块 读取响应内容 获取响应状态码 获取响应头部信息 处理重定向 关闭响应 总结 在Python的众多库中&#xff0c;urllib库是一个专门用于处理网络请求的强大工具。urllib库提供了多种方法来打开和读取UR…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023