vue3 구성 요소 통신의 여러 방법에 대한 간략한 설명-View.js-php.cn

vue3 구성 요소 통신의 여러 방법에 대한 간략한 설명

青灯夜游

풀어 주다： 2021-12-14 19:24:12

앞으로

5248명이 탐색했습니다.

vue3 구성 요소 간에 어떻게 통신하나요? 다음 문서에서는 vue3 구성 요소와 통신하는 여러 가지 방법을 안내합니다. 도움이 되기를 바랍니다.

vue3 구성 요소 통신의 여러 방법에 대한 간략한 설명

vue3 컴포넌트 통신 방법은 다음과 같습니다

props
$emit
$expose / ref
$attrs
v-model
provide / inject
Vuex
미트

[관련 권장 사항: "vue.js tutorial"]

props

<child :msg2="msg2" />
<script setup>
    const props = defineProps({
        // 写法一
        msg2:String
        // 写法二
        msg2:{
            type:String,
            default:&#39;&#39;
        }
    })
    console.log(props) // {msg2:&#39;这是传级子组件的信息2&#39;}
</script>

로그인 후 복사

$emit

//Child.vue
<template>
    // 写法一
    <div @click="emit(&#39;myclick&#39;)">按钮</div>
    // 写法二
    <div @click="handleClick">按钮</div>
</template>
<script setup>
    // 方法一
    const emit = defineEmits([&#39;myClick&#39;],[&#39;myClick2&#39;])
    // 方法二
    const handleClick = () => {
        emit(&#39;myClick&#39;,&#39;这是发送给父组件的信息&#39;);
     }
     
     // 方法二 不适用于vue3.2，使用的useContext()已经舍弃
     import { useContext } from &#39;vue&#39;
     const { emit } = useContext()
     const handleClick = () => { 
      emit(&#39;myClick&#39;,&#39;这是发送给父组件的信息&#39;   
     }
</script>

// Parent.vue响应
<template>
    <child @myClick="onMyClick"></child>
</template>
<script setup>
    import child from "./child.vue"
    import onMychilk = (msg) => {
        console.log(msg) // 父组件收到的信息 
    }
</script>

로그인 후 복사

expose / ref

상위 구성 요소는 하위 구성 요소의 속성을 가져오거나 호출합니다. 하위 구성 요소 메서드

<script setup>
    // 方法一：useContext() vue3.2 之后已经舍弃
    import { useContext } from &#39;vue&#39;
    const ctx = useContext()
    // 对外暴露属性方法等都可以
    ctx.expose({
        childName: &#39;这是子组建的属性&#39;,
        someMethod(){
        console.log(&#39;这是子组件的方法&#39;)
        }
    })
</script>

// Parent.vue 注意 ref="comp"
<template>
    <child ref="comp"></child>
    <button @click="handleClick">按钮</button>
</template>
<script>
    import child from &#39;./child.vue&#39;
    import { ref } from &#39;vue&#39; 
    const comp = ref(null)
    const handleClick = () => {
        console.log(comp.value.childName)
        comp.value.someMethod() // 调用子组件对外暴露的方法
    }
</script>

로그인 후 복사

attts

attrs: 상위 범위의 클래스 및 스타일을 제외한 소품이 아닌 속성 컬렉션을 포함합니다

// 父组件
<child :msg1="msg1" :msg2="msg2" title="3333"></child>
<script setup>
    import child from &#39;./child.vue&#39;
    import { ref,reactive } from &#39;vue
    const msg1 = ref(&#39;111&#39;)
    const msg2 = ref(&#39;222&#39;)
</script>

// 子组件
<script setup>
    import { defineProps,useContext,useAttars } from &#39;vue&#39;
    const props = defineProps({
        msg1: String
    })
    
    // 方法1
    const ctx = useContext()
    console.log(ctx.attars) // {msg2:&#39;222&#39;,title:&#39;333&#39;}
    
    // 方法2 
    const attrs = useAttars()
    console.log(attars)  // {msg2:&#39;2222&#39;,title:&#39;3333&#39;}
</script>

로그인 후 복사

v-model

여러 데이터 양방향 바인딩을 지원할 수 있습니다

<child v-model:key="key" v-modle:value="value" />
<script>
    import child from &#39;./child.vue&#39;
    import { ref,reactive } from &#39;vue&#39;
    const key = ref(&#39;111&#39;)
    const value = ref(&#39;222&#39;)
</script>

//子组件
<template>
   <button @click="handleClick"></button>
</template>
<script setup>
    // 方法一  v3.2 已被移除
    import { useContext } from &#39;vue&#39;
    const { emit } = useContext()
    
    // 方法二
    import { defineEmits } from &#39;vue&#39;
    const emit = defineEmits([&#39;key&#39;,&#39;value&#39;])
    
    //用法
    const handleClick = () => {
        emit(&#39;update:key&#39;,&#39;新的key&#39;)
        emit(&#39;update:value&#39;,&#39;新的value&#39;)
    }
</script>

로그인 후 복사

제공/주입

의존성 주입을 위한 제공/주입 제공: 하위 구성 요소에 제공하려는 데이터를 지정할 수 있습니다. 주입: 하위 구성 요소에서 이 구성 요소에 추가하려는 데이터를 수락합니다. 구성 요소가 얼마나 깊게 중첩되어 있는지에 관계없이 직접 사용할 수 있습니다. Vue3 교차 구성 요소 통신의 EventBus, 대체 mitt.js이지만 기본 방법 EventBus는 동일합니다

설치 방법 npm i mitt -S

Encapsulation
// 父组件 <script setup> import { provide } from 'vue' const name = provide('name') console.log('name','沐华') </script> //子组件 <script setup> import { inject } from 'vue' const name = inject('name') console.log(name) //木华 </script>
로그인 후 복사
구성 요소 간에 사용됩니다

   //store/index.js
   import { createStore } from &#39;vuex&#39;
   export default createStore({
       state:{count:1},
       getters:{
           getCount:state=>state.count
       },
       mutations:{
           add(state){
               state.count++
           }
       }
      })
    // main.js
    import { createApp } from &#39;vue&#39;
    import APP from &#39;./App.vue&#39;
    import store from &#39;./store&#39;
    createApp(APP).use(store).mount("#app")
    
    // 直接使用
    <template>
        <div>
            {{ $store.state.count }}
        </div>
        <button @click="$store.commit(&#39;add&#39;)">
        </button>
    </template>
    
    // 获取
    <script setup>
        import { useStore,computed } from &#39;vuex&#39;
        const store = useStore()
        console.log(store.state.count)
        
        const count = computed (()=>store.state.count)
        console.log(count)
    </script>

로그인 후 복사