Vue에서 다양한 상황에서 어떻게 의사소통을 할 수 있나요? 다음 글에서는 다양한 상황에서 vue의 의사소통 방법을 분석해 보겠습니다. 모두에게 도움이 되기를 바랍니다!
사실 모두가 Vue의 컴포넌트 통신에 익숙합니다. 입만 열어도 결국 면접에서 자주 묻는 질문이다. 이전에는 잘 고려하지 않았기 때문에 작은 프로젝트를 작성하다가 컴포넌트에서 커뮤니케이션의 필요성을 느꼈고, 쓰기 시작했는데 오랜 시간 확인해보니 쓸모가 없었습니다. 그 방법은 이 상황에는 적합하지 않다는 것이었습니다. 그래서 이 사건 이후에 저는 의사소통 방법을 좀 더 명확하고 세심하게 분류하기 위해 글을 쓰기로 결심했습니다. 결국 모든 의사소통 방법이 모든 시나리오에 적합한 것은 아닙니다. (학습 영상 공유: vuejs 튜토리얼)
같은 브라우저의 같은 탭에 관련된 가장 중요한 것은 가치 전달입니다 부모-자식 구성 요소.
모든 사람은 상태 관리자의 개념에 익숙해야 합니다.
이 옵션 쌍을 함께 사용하면 모든 하위 항목에 대한 상위 구성 요소는 구성 요소 계층 구조의 깊이에 관계없이 종속성을 주입하며 업스트림 및 다운스트림 관계가 설정되는 한 항상 적용됩니다.
provide
및 inject
바인딩은 반응하지 않습니다. 그러나 청취 가능한 객체를 전달하면 객체의 속성은 여전히 반응합니다. provide
和 inject
绑定并不是可响应的。不过如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。// parent.vue // 此处忽略template模板的东西 <script> export default { name: 'parent', // provide有两种写法 // 第一种 provide: { a: 1, b: 2 } // 第二种 provide() { return { a: 1, b: 2 } } } </script>
// child.vue // 此处忽略template模板的东西 <script> export default { name: 'child', // inject // 第一种 inject: [ 'a', 'b' ] // 第二种 inject: { abc: { // 可以指定任意不与data,props冲突的变量名,然后指定是指向provide中的哪个变量 from: 'a', default: 'sfd' // 如果默认值不是基本数据类型,那就得改用:default: () => {a:1,b:2} }, b: { default: '33' } } } </script>
正经的props/$emit可太常见了,都是用烂了的,就不用写示例代码了吧。
问题:
// utils/eventBus.js import Vue from 'vue' const EventBus = new Vue() export default EventBus
// main.js // 进行全局挂载 import eventBus from '@/utils/eventBus' Vue.prototype.$eventBos = eventBus
// views/parent.vue <template> <div> <button @click="test">测试</button> </div> </template> <script> export default { data() { return {} }, methods: { test() { this.$eventBus.$emit('testBus', 'test') } } }
// views/child.vue <template> <div> {{ testContent }} <!-- test --> </div> </template> <script> export default { data() { return { testContent: '' } }, mounted() { this.$eventBus.$on('test', e => this.testContent = e) } }
prop
接收会自动设置到子组件内部的最外层标签上,如果是 class
和 style
的话,会合并最外层标签的 class
和 style
。prop
属性,可以使用 inheritAttrs
禁用继承,然后通过 v-bind="$attrs"
把外部传入的 非 prop
属性设置给希望的标签上,但是这不会改变 class
和 style
$attrs
// 需要监听的页面 mounted() { window.addEventListener('storage', this.storageEvent); }, beforeDestroy() { window.removeEventListener() } methods: { storageEvent(e) { console.log("storage值发生变化后触发:", e) } }rrreee
심각한 props/$emit은 너무 흔하고, 모두 남용되기 때문에 샘플 코드를 작성할 필요가 없습니다.
문제:
rrreeerrreeerrreeerrreee
prop
가 없으면 자동으로 하위 구성 요소 내부의 가장 바깥쪽 태그로 설정됩니다. class
및 style
인 경우 가장 바깥쪽 태그는 class
및 style
입니다. 🎜🎜하위 구성 요소가 상위 구성 요소에서 전달한 prop
가 아닌 속성을 상속하지 않으려는 경우 inheritAttrs
를 사용하여 상속을 비활성화한 다음 를 전달할 수 있습니다. >v-bind="$attrs"
외부에서 전달된 비prop
속성을 원하는 태그로 설정하지만 class
및 style
🎜🎜 🎜🎜부모 컴포넌트가 자식 컴포넌트에 값을 전달하지만 자식 컴포넌트가 전달된 값을 모두 props에 선언하지 않은 경우, 자식 컴포넌트에서 $attrs 전달된 값입니다. 🎜🎜예: 이것은 상위 구성 요소입니다.🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜이것은 하위 구성 요소입니다. 선언된 소품이 없습니다.🎜🎜🎜🎜🎜🎜🎜이것은 dom 디스플레이입니다:🎜🎜 🎜🎜 🎜.native
修饰器的) v-on
事件监听器。它可以通过 v-on="$listeners"
传入内部组件——在创建更高层次的组件时非常有用示例:这是父组件
这是子组件
这是执行展示:
同时可以发现子组件加上inheritAttrs:false之后根组件里的未声明props接受的变量消失了
同浏览器的不同页签之间的通讯,大多数的场景是:项目里的增删改查都是打开的新页面,然后新增结束后就触发列表页重新获取列表。这种场景下有什么方法呢?
// 需要监听的页面 mounted() { window.addEventListener('storage', this.storageEvent); }, beforeDestroy() { window.removeEventListener() } methods: { storageEvent(e) { console.log("storage值发生变化后触发:", e) } }
不同浏览器的同一网站的有通讯的必要吗?
如果有那就:websocket(比如聊天室)
哈哈哈哈
위 내용은 vue에서 다양한 상황에서 의사소통하는 방법은 무엇입니까? 공유하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!