vue中子组件怎么获取父组件中的方法的返回值

Question

问题描述

vue中子组件怎么获取父组件中的方法的返回值

问题出现的环境背景及自己尝试过哪些方法

this.$eimt 好像拿不到

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

子获取父组件方法的返回值？额可否贴下代码，或者你用store之类的，或者把父组件里的某个变量通过props传给子组件

Answer 2

方法的返回值只能是方法执行过后获取，this.$parent可获取到父级的实例

Answer 3

可以在执行click方法时调用子组件方法将值传给子组件然后子组件进行接收

//父组件
<app-child ref='child'></app-child>
export default {
    data(){
        msg:'123'
    },
    methods:{
        toChild(){
            this.$refs.child.showModel(this.msg);
        }
    }
}

//子组件
export default {
    methods:{
        showModel(val){
            console.log(val)//父组件传递的值
        }
    }
}

Answer 4

楼主解决了吗？好像通过@自定义方法名='父组件的方法名'这样绑定到子组件里面取不行，只能通过:自定义方法名='父组件方法名'，然后在子组件中的props:['自定义方法名']，再在子组件中要使用的地方使用this.自定义方法名
父组件：

<template>
    <div>
        <!-- 如题，我想要在子组件中使用父组件定义的uuid方法通过@这样是不行的，只能通过:这样 -->
        <comment-childer :createUuid="uuid" @loadComment="loadComment"></comment-childer>
        <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center"
                v-for="item in list" :key="item.id">
                {{item.content}}
                <span class="badge badge-secondary badge-pill">{{item.user}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
import commentChilder from './comment-childer'
export default {
    components: {
        'comment-childer' : commentChilder
    },
    data () {
        return {
            list: [
                {id: this.uuid(), user: '李白', content: '天生我材必有用'},
                {id: this.uuid(), user: '王健林', content: '先赚它一个亿'},
                {id: this.uuid(), user: '雷军', content: '站在风口上，猪都能飞起来'}
            ]
        }
    },
    created () {
        this.loadComment()
    },
    methods: {
        //uuid是return一个字符串
        uuid() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
            s[8] = s[13] = s[18] = s[23] = "-";
            var uuid = s.join("");
            return uuid;
        },
        loadComment () {
            if (localStorage.getItem('cmts')) {
                var list = JSON.parse(localStorage.getItem('cmts'))
                this.list = list;
            }
        }
    }
}
</script>

<style>


</style>

子组件：

<template>
    <div>
        <div class="form-group">
          <label>评论人：</label>
          <input type="text" class="form-control" v-model="user" />
        </div>
        <div class="form-group">
          <label>评论内容：</label>
          <textarea type="text" class="form-control" v-model="content" />
        </div>
        <div class="form-group">
          <input type="button" class="btn btn-primary" @click="addContent" value="提交" />
        </div>
    </div>
</template>

<script>
export default {
    components: {

    },
    data () {
        return {
           user : null,
           content : null
        }
    },
    //然后在再props这里引入父组件中传入的:自定义方法名
    props: ['createUuid'],
    methods: {
        addContent () {
            if(this.user !== null && this.content !== null){
                //在子组件中this.自定义方法名，才能使用
                //因为在父组件中createUuid()对应的方法是return的，这样的话我每次触发addContent方法就会重新生成一个新的uuid
                var content = {id: this.createUuid(), user: this.user, content: this.content}
                console.log('id is: ' + this.createUuid())
                var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                list.unshift(content)
                localStorage.setItem('cmts', JSON.stringify(list))
                this.user = this.content = null
                this.$emit('loadComment')
            } else {
                alert("评论人或内容不能为空！");
            }
        }
    }
}
</script>

<style>


</style>