随笔- 24 文章- 0 评论- 3 阅读- 62016

vue子传父、父传子

子传父

　　vue子传父使用$emit传值

　　子组件：

<template>
    <div>
        <button @click="toParent">点击传到父级</button>
    </div>
</template>
<script>
export default {
    name: 'child',
    methods: {
        toParent () {
            this.$emit('fromChild', 'child')
        }
    }
}
</script>

父组件

<template>
    <div>
        <p>子级传过来的值：{{childVal}}</p>
        <child @fromChild="getChild"></child>
    </div>
</template>
<script>
import child from "@/components/child";
 
export default {
    name: 'parent',
    data () {
        return {
            childVal: ''
        }
    },
    components: {
        child
    },
    methods: {
        getChild (v) {
            this.childVal = v;
        }
    }
}
</script>

页面未点击前

点击后

传过来啦

父传子

　　子组件使用props接收接收时还可以设置默认值当没获取到值时会使用设置的默认值

父组件

<template>
    <div>
        <child :tochild="parentVal"></child>
    </div>
</template>
<script>
import child from "@/components/child";
 
export default {
    name: 'parent',
    data () {
        return {
            parentVal: 'parent',
        }
    },
    components: {
        child
    }
}
</script>

子组件

<template>
    <div>
        <p>父级传过来的值：{{tochild}}</p>
    </div>
</template>
<script>
export default {
    name: 'child',
    props: {
        tochild: String
    }
}
</script>