vue.js之定义组件和子父组件数据传递及函数的相互调用

import Vue from 'vue'

// 定义一个名称为componentOne的组件
const componentOne = {
    // props 用来接收父项所传递过来的数据，该数据是挂载在本组件上，可以直接用this.调用
    props: {
        active: {
            type: Boolean, // 定义父项传递数据的类型
            require: true // 是否为必传项,默认为false
        },
        propsOne: String
    },
    template: `
        <div>
            <span v-show="active" v-model="val">see me is active?</span>
            <span @click="handleChange">{{propsOne}}</span>
        </div>
    `,
    data () {
        return {
            val: '123'
        }
    },
    methods: {
        handleChange () {
            // 子项调用父项的方法，第一个参数是调用父项的方法名，后面的参数是父项方法所需的参数
            this.$emit('changeParentVal', '111')
        },
        changeChildVal(parm) {
            this.val = parm
        }
    }
}

new Vue({
    // 接收所需要的子项组件
    components: {
        ComOne: componentOne 
    },
    el: "#id",
    template: `
        <div>
            <com-one :active="false" :prop-one="val1" ref="oneCom"><com-one>
            <span @click="changeChildVal"></span>
        </div>
    `,
    data: {
        val1: '123' 
    },
    methods: {
        changeParentVal(parm) {
            this.val1 = '456'
            console.log(parm)
        },
        changeChildVal () {
            // 通过$refs找到指定的子项组件，并主动调用子项组件的方法
            this.$refs.oneCom.changeChildVal('312')
        }
    }
})