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.hqwc.cn/news/524921.html

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

相关文章

Stable Diffusion WebUI 中英文双语插件（sd-webui-bilingual-localization）并解决了不生效的情况

Stable Diffusion WebUI 中英文双语插件（sd-webui-bilingual-localization）并解决了不生效的情况

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 本文介绍一款中英文对照插件 sd-webui-bilingual-localization&#xff0c;该插件可以让你的 Stable Diffusion WebUI 界面同时显示中文和英文&#xff0c;让我…
阅读更多...
DFS和BFS以及练习题目（未完待续）

DFS和BFS以及练习题目（未完待续）

DFS和BFS 温馨提示&#xff1a;学习dfs之前最好先了解一下递归的思想。 递归思想 斐波那契 题目分析 题目代码 import java.util.Scanner; public class Main{static long dp[]; public static void main(String[] args) {Scanner scanner new Scanner(System.in);int t…
阅读更多...
拿捏算法的复杂度

拿捏算法的复杂度

目录 前言 一&#xff1a;算法的时间复杂度 1.定义 2.简单的算法可以数循环的次数&#xff0c;其余需要经过计算得出表达式 3.记法&#xff1a;大O的渐近表示法 表示规则&#xff1a;对得出的时间复杂度的函数表达式&#xff0c;只关注最高阶&#xff0c;其余项和最高阶…
阅读更多...
BC134 蛇形矩阵

BC134 蛇形矩阵

一&#xff1a;题目 二&#xff1a;思路分析 2.1 蛇形矩阵含义 首先&#xff0c;这道题我们要根据这个示例&#xff0c;找到蛇形矩阵是怎么移动的 这是&#xff0c;我们可以标记一下每次移动到方向 我们根据上图可以看出&#xff0c;蛇形矩阵一共有两种方向&#xff0c;橙色…
阅读更多...
可调恒定电流稳压器NSI50150ADT4G车规级LED驱动器 提供专业的汽车级照明解决方案

可调恒定电流稳压器NSI50150ADT4G车规级LED驱动器 提供专业的汽车级照明解决方案

NSI50150ADT4G产品概述&#xff1a; NSI50150ADT4G可调恒定电流稳压器 (CCR) &#xff0c;是一款简单、经济和耐用的器件&#xff0c;适用于为 LED 中的调节电流提供成本高效的方案&#xff08;与恒定电流二极管 CCD 类似&#xff09;。该 (CCR) 基于自偏置晶体管 (SBT) 技术&…
阅读更多...
近年来文本检测相关工作梳理

近年来文本检测相关工作梳理

引言 场景文本检测任务&#xff0c;一直以来是OCR整个任务中最为重要的一环。虽然有一些相关工作是端对端OCR工作的&#xff0c;但是从工业界来看&#xff0c;相关落地应用较为困难。因此&#xff0c;两阶段的OCR方案一直是优先考虑的。 在两阶段中&#xff08;文本检测文本识…
阅读更多...
世界上最伟大的商业模式是“让利”，总结10套消费返利玩转市场！

世界上最伟大的商业模式是“让利”，总结10套消费返利玩转市场！

文丨微三云营销总监胡佳东&#xff0c;点击上方“关注”&#xff0c;为你分享市场商业模式电商干货。 - 引言&#xff1a;很多企业家朋友说&#xff0c;生意越来越难做了&#xff0c;市场太卷、同行价格低、难招商、难融资、难推广&#xff0c;其实你是不懂“人心”&#xff…
阅读更多...
COMSOL热应力仿真

COMSOL热应力仿真

热应力 热膨胀子节点 热膨胀输入类型 假如直接知道热膨胀大小&#xff0c;可以直接对热应变进行赋值。 约束与载荷 对于自由膨胀&#xff0c;可以添加抑制刚体运动。 案例分析 在参数部分&#xff0c;设定体积参考温度Tref&#xff0c;假定在25[degC]模型无热应变。 APP开发器-…
阅读更多...
笔记78：软件包管理工具 apt 详解（包含常用 apt 命令介绍）

笔记78：软件包管理工具 apt 详解（包含常用 apt 命令介绍）

一、Ubuntu 的包管理工具 apt 过去&#xff0c;软件通常是从源代码安装的&#xff0c;安装步骤为&#xff1a;​​​​​​ 在Github上下载该软件的源码文件&#xff1b;查看Github上这个软件项目中提供的自述文件&#xff08;通常包含配置脚本或 makefile 文件&#xff09;&a…
阅读更多...
华容道问题求解_详细设计(四)之查找算法2_BFS

华容道问题求解_详细设计(四)之查找算法2_BFS

&#xff08;续上篇&#xff09; 利用BFS查找&#xff0c;会找到最短路径&#xff08;没有权重的图&#xff09;&#xff0c;这个道理比较简单&#xff0c;这是由于寻找路径的方法都是从起点或者接近起点的位置开始的。查找过程如果画出图来&#xff0c;类似于一圈圈的放大&…
阅读更多...
离线数仓（五）【数据仓库建模】

离线数仓（五）【数据仓库建模】

前言 今天开始正式数据仓库的内容了, 前面我们把生产数据 , 数据上传到 HDFS , Kafka 的通道都已经搭建完毕了, 数据也就正式进入数据仓库了, 解下来的数仓建模是重中之重 , 是将来吃饭的家伙 ! 以及 Hive SQL 必须熟练到像喝水一样 ! 第1章 数据仓库概述 1.1 数据仓库概念 数…
阅读更多...
Android Studio下载gradle超时问题解决

Android Studio下载gradle超时问题解决

方法一 1. 配置根目录的setting.gradle.kts文件 pluginManagement {repositories {maven { urluri ("https://www.jitpack.io")}maven { urluri ("https://maven.aliyun.com/repository/releases")}maven { urluri ("https://maven.aliyun.com/repos…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023