Vue3 component communication

Vue3 component communication

• Vue2 and the communication mode is basically the same, but there are differences in writing

props/emit

• The setup function takes two arguments, props and context(context, which has a EMIT)
• Usage show

    / / the parent component
    <template>
        <i-button :type='type' @onClick="click">button</i-button>
    </template>
    <script>
        import { ref } from "vue"
        import IButton from './IButton'
        export default{
            components:{
                IButton
            },
            setup(){
                const type = ref('primary');
                const click = val= > {
                    // The parent component receives the value of the child component
                    console.log(val) / / 1
                }
                return{
                    type,
                    click
                }
            }
        }
    </script>
    
    / / child component
    <template>
        <button :type='type' @click="handleClick"> 
            <slot></slot>
        </button>
    </template>
    <script>
        export default{
            props: {type: {type:String.
                    default:'default'}},setup(props,{ emit }){
                const handleClick = val= > {
                    // The child passes arguments to the parent
                   emit('onClick'.1); 
                   // The parent component listens for the same event name as the one registered here
                }
                return{
                    handleClick
                }
            }
        }
    </script>
Copy the code

ref

• Vue2. X is obtained by methods such as this.$children, but this is not accessible from the setup function in vue3, so use other methods to get instance objects
• Usage show

    / / the parent component
    <template>
        <i-button ref="btnRef" :type='type' @click="click">button</i-button>
    </template>
    <script>
        import { ref } from "vue"
        import IButton from './IButton'
        export default{
            components:{
                IButton
            },
            setup(){
                const type = ref('primary');
                const btnRef = ref(null);
                const click = () = > {
                    // The parent component calls the child component's methods to get data
                    const val = btnRef.value.sendParent();
                    console.log(val); / / 1
                }
                return{
                    type,
                    btnRef,
                    click
                }
            }
        }
    </script>
    
    // Subcomponents write only logical parts
   < script>
       export default{
            setup(){
              const sendParent =() = >{
                return '1'
              }
              return {
                sendParent // Be sure to return
              }
            }
       }
   </script>
Copy the code

provide/inject

• Personally, I also find it more convenient to use than 2.x
• This communication method is suitable for multi-layer nested and level components
• Disadvantages: Poor tracking of changes, resulting in code clutter
• Usage show

     // The parent component only writes the logical part
   < script>
       import { ref, provide } from "vue";
       export default{
            setup(){
                const num = ref(0);
                // The first argument is key,
                // The second argument is value
                provide('num',num);
            }
       }
   </script>
   
    // Subcomponents write only logical parts
   < script>
       import { inject } from "vue";
       export default{
            setup(){
                const num = inject('num');
                console.log(num) / / 0
            }
       }
   </script>
Copy the code

vuex

• Vuex is suitable for multi-component data unification and easy traceability
• Usage demonstration (For details about vuex configuration items, see Vuex4 Study Notes)

    // The parent component only writes the logical part
   < script>
       import { useStore } from "vuex";
       export default{
            setup(){
               const store = useStore();
               
               const changeChildrenNum = () = > {
                 store.dispatch("changeNum".1)}return {
                changeChildrenNum
               }
            }
       }
   </script>
   
    // Subcomponents write only logical parts
   < script>
       import { useStore,watch } from "vuex";
       export default{
            setup(){
               const store = useStore();
               watch(
                  () = > store.getters.num,
                  (newVal,oldVal) = > {
                    // The parent component clicks to trigger
                    console.log(newVal); / / 1})return {
                changeChildrenNum
               }
            }
       }
   </script>
Copy the code

At the end

• If you have any questions, please contact me. I will revise it as soon as possible
• If it is helpful to you, please click a like, thank you!