cli3 父子组件传值

1. 建立父子组件

 2.1 props / $emit

props 父组件向子组件传值：

app.vue

<template>
  <div id="app">
    <m-parent></m-parent>
  </div>
</template>

<style>
</style>

<script>
  import MParent from './views/Parent.vue'
  export default{
    components: {
      MParent,
    },
  }
</script>

 Parent.vue：通过v-bind将值传到子组件

<template>
    <div>
        <h3>Parent</h3>
        <m-child v-bind:msg1="'from Parent msg1'"></m-child>
        <m-child :msg2="'from Parent msg2'"></m-child>
        <m-child msg3="from Parent msg3"></m-child>
    </div>
</template>

<script>
    import MChild from './Child.vue'
    export default {
        components: {
            MChild,
        },
    }
</script>

<style>

</style>

Child.vue：通过props保存传来的值

<template>
    <div>
        <h3>Child</h3>
        <h5>{
   
   { msg1 }}</h5>
        <h5>{
   
   { msg2 }}</h5>
        <h5>{
   
   { msg3 }}</h5>
    </div>
</template>

<script>
    export default {
        props: {
            msg1: {
                type: String,
                default: ''
            },
            msg2: {
                type: String,
                default: ''
            },
            msg3: {
                type: String,
                default: ''
            },
        },
    }
</script>

<style>

</style>

$emit  子组件向父组件传值：

 子组件：通过button，触发showMsg事件

<template>
    <div>
        <h3>Child</h3>
        <button @click="showMsg">亮相吧小宝贝！</button>
    </div>
</template>

<script>
    export default {
        methods: {
            showMsg() {
                this.$emit('showMsg','来自子组件的爱！')
            }
        },
    }
</script>

<style>

</style>

父组件：监听showMsg事件，通过本地方法showMsgParent将传来的值存到本地data

<template>
    <div>
        <h3>Parent</h3>
        <h5>{
   
   { msg }}</h5>
        <m-child @showMsg="showMsgParent"></m-child>
    </div>
</template>

<script>

import MChild from './Child.vue'
export default {
    data() {
        return {
            msg: ''
        }
    },
    components: {
        MChild,
    },
    methods: {
        showMsgParent(val) {
            this.msg = val
        }
    },
}

</script>

<style></style>

2.2 $children和$parent

Parent: 在mounted里，获取到this.$children, 从而获取child里的内容

<template>
    <div>
        <h3>Parent</h3>
        <m-child></m-child>
    </div>
</template>

<script>

import MChild from './Child.vue'
export default {
    data() {
        return {
            msg: ''
        }
    },
    components: {
        MChild,
    },
    mounted () {
        console.log(this.$children[0]);
    },
}

</script>

<style></style>

2.3 $ref

<template>
    <div>
        <h3>Parent</h3>
        <m-child ref="child"></m-child>
    </div>
</template>

<script>

import MChild from './Child.vue'
export default {
    data() {
        return {
            msg: ''
        }
    },
    components: {
        MChild,
    },
    mounted () {
        console.log(this.$refs.child)
    },
}

</script>

<style></style>