vue子父组件传值

父组件向子组件传值
在父组件中使用子组件，并且向其传递数据，子组件同时调用父组件的方法

页面中：
<div id="app">
        <ul>
            <people-item
                    v-for="people in peoples"
                    :key="people.id"
                    :people="people"
                    @my-event="showContent"
            ></people-item>
        </ul>
    </div>
js代码：
    //注册一个组件
    Vue.component('people-item',{
        props: ['people'],
       template: '<li @click="getContent">{{ people.name }}</li>',
        methods: {
            getContent() {
                this.$emit('my-event');
            }
        }
    });
    //实例化
    var vm = new Vue({
        el: '#app',
        data: {
            peoples: [
                {
                    id: 1,
                    name: '张三'
                },
                {
                    id: 2,
                    name: '李四'
                }
            ]
        },
        methods: {
          showContent() {
            console.log('获取数据');
          }
        }
    })

子组件向父组件传值
父组件使用子组件的数据和方法，主要通过$refs来调用，但是必须给组件通过ref来指定一个唯一标识。

<div id="app">
        <p>子组件的数据：{{ info }}</p>
        <todo-item ref="child"></todo-item>
</div>

//注册一个组件
 Vue.component('todo-item',{
        template: '<span>子组件</span>',
        data() {
            return {
                info: 'hello'
            }
        },
        methods: {
            childFun(msg) {
                console.log(msg);
            }
        }
    });
 //实例化
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'父组件调用子组件方法',
            info: ''
        },
        methods: {
            getChildFun() {
              this.info = this.$refs.child.info;
              this.$refs.child.childFun(this.msg)
            }
        },
        mounted() {
            this.getChildFun();
        }
    })

作者：_我就是愛自由
原文：https://blog.csdn.net/u010359143/article/details/80734672