Vue【從無到有從有到無】【F2】父子組件之間的方法調用

1.父組件調用子組件的方法

父組件

<template>
    <div>
        <button @click="clickParent">點擊</button>
        <child1 ref="child1"></child1>
    </div>
</template>

<script>
    import Child1 from './child1';
    export default {
        name: "parent",
        components: {
            child1: Child1
        },
        methods: {
            clickParent() {
                // this.$refs.child1.$emit('handleParentClick', "test");
                this.$refs.child1.handleParentClick("test");
            }
        }
    }
</script>

子組件

<template>
    <div>child1</div>
</template>

<script>
    export default {
        name: "child1",
        props: "msg",
        methods: {
            handleParentClick(e) {
                console.info(e)
            }
        }
    }
</script>

2.子組件調用父組件的方法

父組件

<template>
    <div class="wrapper">
        <cp_action @parentMethod="macSelect"></cp_action>
    </div>
</template>

<script>
import ../components/action  //引入子組件
export default{
    components:{
        cp_action
    },
    method:{
        macSelect(){
            alert(123)；
        }
    }
}
</script>

子組件

<template>
    <div class="bet-action">
        <span class="mac-select" @click="childMethod">請求</span>
    </div>
</template>

<script>
    export default{
      methods: {
          childMethod() {
              console.log('請求父組件方法');
              this.$emit('parentMethod');  //使用$emit()引入父組件中的方法
          }
      },
    }
</script>

3.父調子組件 v-if 與 ref 組合使用

父組件

<template>
    <div>
        <button @click="clickChild1">點擊1</button>
        <button @click="clickChild2">點擊2</button>
        <child1 ref="child1" v-if="status === 0" />
        <child2 ref="child2" v-if="status === 1" />
    </div>
</template>

<script>
    import child1 from './child1';
    import child2 from './child2';
    export default {
        name: "parent",
        components: {child1, child2},
        data() {
            return {
                status: 0,
            }
        },
        methods: {
            clickChild1() {
                this.status = 0
                this.$nextTick(()=>{
                    // this.$refs.child1.$emit('handleParentClick', "high");
                    this.$refs.child1.handleParentClick("test");
                })
            },
            clickChild2() {
                this.status = 1
                this.$nextTick(()=>{
                    // this.$refs.child2.$emit('handleParentClick', "high");
                    this.$refs.child2.handleParentClick("test");
                })
            }
        }
    }
</script>

子組件

<template>
    <div>child1</div>
</template>

<script>
    export default {
        name: "child1",
        props: "msg",
        methods: {
            handleParentClick(e) {
                console.info(e)
            }
        }
    }
</script>

<template>
    <div>child2</div>
</template>

<script>
    export default {
        name: "child2",
        props: "msg",
        methods: {
            handleParentClick(e) {
                console.info(e)
            }
        }
    }
</script>

3.1.v-if 與 ref 組合使用說明

ref 需要在dom渲染完成後纔會有，在使用的時候確保dom已經渲染完成。比如在生命週期 mounted(){} 鉤子中調用，或者在 this.$nextTick(()=>{}) 中調用。

如果ref 是循環出來的，有多個重名，那麼ref的值會是一個數組 ，此時要拿到單個的ref 只需要循環就可以了。