vue父组件调用子组件的方法,子组件调用父组件的方法

vue父组件调用子组件的方法,子组件调用父组件的方法

插入链接与图片

链接: link.

图片:

带尺寸的图片:

代码：

//父组件
<template>
	<div>
	    <childItem ref="childAct"> </childItem >
	    <button @click="mybut()">点击调用子组件方法</button>
	</div>
</template>
<script >
import childItem  from '../childItem '
 export default {
	name: 'parent',
    data () {
      return {}
      },
      components: {
	childItem 
	},
    methods: {
	    mybut（）{
	        this.$refs.childAct.getChild();
	    }，
	    getParent(){
	          alert("父组件内容")
	    }
    }
      }
</script >

//子组件
<template>
	<div>
	     <button @click="parentbtn()">点击调用父组件方法</button>
	</div>
</template>
<script >
 export default {
	name: 'child',
    data () {
      return {}
      },
      components: {
	
	},
    methods: {
       getChild(){
        alert("子组件内容")
       }，
       parentbtn(){
            this.$parent.getParent();
       }
    }
      }
</script >