vue에서 다양한 상황에서 의사소통하는 방법은 무엇입니까? 공유하는 방법-View.js-php.cn

Vue에서 다양한 상황에서 어떻게 의사소통을 할 수 있나요? 다음 글에서는 다양한 상황에서 vue의 의사소통 방법을 분석해 보겠습니다. 모두에게 도움이 되기를 바랍니다!

vue에서 다양한 상황에서 의사소통하는 방법은 무엇입니까? 공유하는 방법

사실 모두가 Vue의 컴포넌트 통신에 익숙합니다. 입만 열어도 결국 면접에서 자주 묻는 질문이다. 이전에는 잘 고려하지 않았기 때문에 작은 프로젝트를 작성하다가 컴포넌트에서 커뮤니케이션의 필요성을 느꼈고, 쓰기 시작했는데 오랜 시간 확인해보니 쓸모가 없었습니다. 그 방법은 이 상황에는 적합하지 않다는 것이었습니다. 그래서 이 사건 이후에 저는 의사소통 방법을 좀 더 명확하고 세심하게 분류하기 위해 글을 쓰기로 결심했습니다. 결국 모든 의사소통 방법이 모든 시나리오에 적합한 것은 아닙니다. (학습 영상 공유: vuejs 튜토리얼)

같은 창에서 (즉, 같은 브라우저의 같은 탭에서)

같은 브라우저의 같은 탭에 관련된 가장 중요한 것은 가치 전달입니다 부모-자식 구성 요소.

vuex: 상태 관리자: 프로젝트의 모든 구성 요소에 적용 가능하며 매우 포괄적입니다.

모든 사람은 상태 관리자의 개념에 익숙해야 합니다.

여러 구성 요소가 하나 이상의 상태 값을 공유할 수 있습니다. 구성 요소 계층 구조가 아무리 깊어도 정상적으로 액세스할 수 있습니다. 따라서 이는 공식적으로 직접 지원되는 통신 방식입니다.
참고: 작은 단일 페이지 애플리케이션의 경우 이 옵션은 그다지 권장되지 않습니다. 사람이 너무 헐렁해 보여서 들 수가 없어요.

provide / inject (v2.2.1 이상 기준으로 작성): N 레벨 컴포넌트에 적용 가능하지만 단일 라인 상속 유형이어야 합니다.

이 옵션 쌍을 함께 사용하면 모든 하위 항목에 대한 상위 구성 요소는 구성 요소 계층 구조의 깊이에 관계없이 종속성을 주입하며 업스트림 및 다운스트림 관계가 설정되는 한 항상 적용됩니다.

N개 층의 건물과 동일합니다. 최상위 레벨은 각 층 사이에 공통 파이프가 있습니다. 튜브에는 각 층에 inject
라는 콘센트가 있습니다. 참고: provide 및 inject 바인딩은 반응하지 않습니다. 그러나 청취 가능한 객체를 전달하면 객체의 속성은 여전히 반응합니다. provide 和 inject 绑定并不是可响应的。不过如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
让咱们来看看代码

// parent.vue
// 此处忽略template模板的东西
<script>
export default {
    name: &#39;parent&#39;,
    // provide有两种写法
    // 第一种
    provide: {
        a: 1,
        b: 2
    }
    // 第二种
    provide() {
        return {
            a: 1,
            b: 2
        }
    }
}
</script>

로그인 후 복사

// child.vue
// 此处忽略template模板的东西
<script>
export default {
    name: &#39;child&#39;,
    // inject
    // 第一种
    inject: [ &#39;a&#39;, &#39;b&#39; ]
    // 第二种
    inject: {
        abc: { // 可以指定任意不与data，props冲突的变量名，然后指定是指向provide中的哪个变量
            from: &#39;a&#39;,
            default: &#39;sfd&#39; // 如果默认值不是基本数据类型，那就得改用：default: () => {a:1,b:2}
        },
        b: {
            default: &#39;33&#39;
        }
    }
}
</script>

로그인 후 복사

props：适用相邻两组件的传值(父->子)；$emit: 子 -> 父

正经的props/$emit可太常见了，都是用烂了的，就不用写示例代码了吧。

只适用于相邻级别的父子组件之间传值
对于多级组件的传值虽然也能用props传，但是吧，这样的话会让代码很难维护，极其不推荐。

eventBus：地位与vuex差不多，适用任意组件，包容性极强

问题：

不方便维护：如果在项目里用的多了，可能出现方法名冲突导致异常的问题，而且比较不方便排查。
示例：

// utils/eventBus.js
import Vue from &#39;vue&#39;
const EventBus = new Vue()
export default EventBus

로그인 후 복사

// main.js
// 进行全局挂载
import eventBus from &#39;@/utils/eventBus&#39;
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(&#39;testBus&#39;, &#39;test&#39;)
        }
    }
}

로그인 후 복사

// views/child.vue
<template>
    <div>
        {{ testContent }} <!-- test -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            testContent: &#39;&#39;
        }
    },
    mounted() {
        this.$eventBus.$on(&#39;test&#39;, e => this.testContent = e)
    }
}

로그인 후 복사

$attrs / $listeners

$attrs

官方解释：
- 从父组件传给自定义子组件的属性，如果没有 prop 接收会自动设置到子组件内部的最外层标签上，如果是 class 和 style 的话，会合并最外层标签的 class 和 style。
- 如果子组件中不想继承父组件传入的非 prop 属性，可以使用 inheritAttrs 禁用继承，然后通过 v-bind="$attrs" 把外部传入的非 prop 属性设置给希望的标签上，但是这不会改变 class 和 style
当父组件向子组件传值，但是子组件并没有全部将传过来的值在props中声明时，在子组件里就可以通过$attrs

// 需要监听的页面
mounted() {
    window.addEventListener(&#39;storage&#39;, this.storageEvent);
}，
beforeDestroy() {
    window.removeEventListener()
}
methods: {
    storageEvent(e) {
        console.log("storage值发生变化后触发:", e)
    }
}

로그인 후 복사

props: 두 개의 인접한 구성 요소(부모->자식) 간의 값 전송에 적용 가능합니다. $emit: child-> parent

심각한 props/$emit은 너무 흔하고, 모두 남용되기 때문에 샘플 코드를 작성할 필요가 없습니다. vue에서 다양한 상황에서 의사소통하는 방법은 무엇입니까? 공유하는 방법

문제:
rrreeerrreeerrreeerrreee
$attrs / $listeners
🎜🎜🎜$attrs🎜🎜🎜공식 설명🎜: 🎜🎜 속성이 상위 구성 요소에서 사용자 정의 하위 구성 요소로 전달됩니다. 수신된 prop가 없으면 자동으로 하위 구성 요소 내부의 가장 바깥쪽 태그로 설정됩니다. class 및 style인 경우 가장 바깥쪽 태그는 class 및 style입니다. 🎜🎜하위 구성 요소가 상위 구성 요소에서 전달한 prop가 아닌 속성을 상속하지 않으려는 경우 inheritAttrs를 사용하여 상속을 비활성화한 다음 를 전달할 수 있습니다. >v-bind="$attrs" 외부에서 전달된 비prop 속성을 원하는 태그로 설정하지만 class 및
style🎜🎜 🎜🎜부모 컴포넌트가 자식 컴포넌트에 값을 전달하지만 자식 컴포넌트가 전달된 값을 모두 props에 선언하지 않은 경우, 자식 컴포넌트에서 <를 사용할 수 있습니다. 모든 상위 구성요소를 얻기 위해 프록시에 대한 code>$attrs 전달된 값입니다. 🎜🎜예: 이것은 상위 구성 요소입니다.🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜이것은 하위 구성 요소입니다. 선언된 소품이 없습니다.🎜🎜🎜🎜🎜🎜🎜이것은 dom 디스플레이입니다:🎜🎜 🎜🎜 🎜
- 此时，通过dom可以发现，所有没有声明的信息，全部出现在了子组件的根元素上。
- 如果要让没有声明的信息不出现在子组件的根元素上，那就在子组件与data同级的位置加个属性：inheritAttrs: false；这样就不会未通过props接收的变量就不会出现在子组件的根元素上了
- 至于怎么传递给子组件的子组件的子组件的子组件....等，那就需要给子组件的子组件依次都绑定：v-bind="$attrs"即可。
- 注意这样只适用于传递数据。
$listeners
- 官方解释：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用
- 当父组件向子组件传递回调时，子组件可以通过$listeners代理所有回调。
- 示例：这是父组件

vue에서 다양한 상황에서 의사소통하는 방법은 무엇입니까? 공유하는 방법

- 这是子组件

vue에서 다양한 상황에서 의사소통하는 방법은 무엇입니까? 공유하는 방법

- 这是执行展示：
- 同时可以发现子组件加上inheritAttrs:false之后根组件里的未声明props接受的变量消失了
最后：建议最好不要用这个玩意，虽然他们都可以相对便捷的将第一级组件的属性，方法回调传递给N级子组件中的任一级，但是之后进行bug定位，或者分析需求将会是一个比较大的挑战。

不同窗口(同浏览器不同页签内)

同浏览器的不同页签之间的通讯，大多数的场景是：项目里的增删改查都是打开的新页面，然后新增结束后就触发列表页重新获取列表。这种场景下有什么方法呢？

监听stroage事件

// 需要监听的页面
mounted() {
    window.addEventListener(&#39;storage&#39;, this.storageEvent);
}，
beforeDestroy() {
    window.removeEventListener()
}
methods: {
    storageEvent(e) {
        console.log("storage值发生变化后触发:", e)
    }
}