vue 框架的组件与组件通信方法

// myinput.vue 子组件的声明props属性字段<template>	<view class='parent'>		<text class='tip-text'>{{tip}}</text>		<view class="picker-parent">			<input :id='tip' class='tip-input' style="border: 0px; height:78rpx;line-height:78rpx;margin-left:1rpx;" :maxlength="maxlength"			 name="name" v-model="value" @input="inputFunc" :type="type" :placeholder='placeholder' :disabled="disabled"/>		</view>	</view></template>
<script>	export default {		name: 'myinput',		data() {			return {				value: '',				disabled: false,				type: 'text'			};		},		computed:{			isShowImage: function() {				return false			},		},		props: {			tip: {				type: String,				required: true			},			maxlength: {				type: Number,				required: true			},			placeholder: {				type: String,				required: true			},			inputCallback: {				type: Function,				required: true			},			initValue:{				type: String,				required: false			},			initType:{				type: String,				required: false			}		},		mounted() {			let initValue = this.initValue			let initType = this.initType			if(!isNil(initValue)){				this.value = initValue				this.disabled = true			}			if(!isNil(initType)){				this.type = initType			}		},		methods:{			inputFunc(e){				this.$props.inputCallback(e.target.id, e.detail.value)			},			resetDisabled(){ // 表示 复位 disabled禁用属性				// console.log("父组件调用了我", this.disabled)				this.disabled = false			}		}	}</script>

// page.vue 父组件调用myinput组件，并且传递参数给子组件<template>	<view class="container">		<myinput class="tip_input-parent" style="margin-top: 40rpx;" 			:tip="name.key" :initValue="name.value" maxlength="8" 			placeholder="请输入最多8个字符" :inputCallback="inputCallback"			ref="name"		></myinput>			</view></template>

// 发送事件uni.$emit("event", this.device, this.isChecked)
// 监听事件，一般在启动的时候调用uni.$on("event", (isChecked) => {	console.warn("收到事件", isChecked)})
// 取消监听，一般在结束的时候调用uni.$off("event")

new Vue({  // state  data () {    return {      count: 0    }  },  // view  template: `    <div>{{ count }}</div>  `,  // actions  methods: {    increment () {      this.count++    }  }})

<template>    <div>        <h1>我是父组件</h1>        <child ref="child"></child>    </div></template><script>    import child from './child'    export default{        components:{ child },        methods:{            parent(){              	this.$refs.child.childFn()                this.$.refs.child.childFn()            }        }    }</script>

<template>    <div>       <h2>我是子组件</h2>    </div></template><script>    import child from './child'    export default{        components:{ child },        methods:{            childFn(){                alert('父组件调用了我')            }        }    }</script>