一、父页面调用子页面的属性

利用ref属性可以获取到dom元素或者是子组件，从而可以调用子组件的方法或属性（注意2.0版本用ref取代了el）

方法1：在插入子组件的地方为子组件定义ref，通过this.$ref.子组件的名称.子组件中的属性名调用子页面中定义的属性。

//父页面中
<template>
    <div>
        <child ref="child" ></child>
    </div>
</template>
<script>
import Child from './child'
export default{
    components:{
        Child
    },
    mounted(){
        console.log(this.$refs.child.flag);//打印子页面中定义的属性的值
    }
}
</script>

二、父页面调用子页面的方法

方法1：在插入子组件的地方为子组件定义ref，通过this.$ref.子组件的名称.子组件中的方法名()调用子页面中定义的方法。

方法2：通过组件的$emit、$on方法

//父组件中

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
               this.$refs.child.$emit("childmethod")    //子组件$on中的名字
        },
    },
}
</script>

//子组件中

<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on('childmethods', function() {
                console.log('我是子组件方法');
            });
        });
     },
};
</script>

三、子页面调用父页面的属性

四、子页面调用父页面的方法

方法1：

父级

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide(){
      return{
          say:this.say
      }
  },
  methods:{
      say(){
          alert("这是父页面的方法");
      }
  }
}
</script>

<style>
</style>

子级：

<template>
    <button @click="recv">点击调用父页面的方法</button>
</template>
<script>
    export default {
        inject:['say'],
        methods:{
         recv(){
             this.say();
         }
        }
    }
    
</script>

方法2：直接在子组件中通过this.$parent.event来调用父组件的方法

父级

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子级

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

在Vue中，组件实例之间的作用域是孤立的，所以不能直接在子组件上引用父组件的数据，同时父组件也不能直接使用子组件的数据

五、父组件向子组件传递参数（通过props）

父页面

<template>
    <div>
        <child v-bind:param="param"></child>
    </div>

</template>
<script>
export default{
    components:{
        child
    },
    data(){
        return{
            param:"hello"
        }
    }
    
}
</script>

子页面

<template>
    <div>
        {{param}}
        //这里显示结果为：hello
    </div>

</template>
<script>
export default{
    props:{
        param:""
    },
    
}
</script>

温馨提示：如上所示，父组件在模板中引用子组件，通过v-bind传递参数param，值为hello，其可以为父组件中的动态属性，同时不用v-bind直接param="hello传递静态值给子组件，则传递的值就是hello字符串。在利用props实现传值的过程中理论上是要实现单向传递，即父组件改变相关参数的值，子组件也相应变化，但是子组件对参数的改变不应该影响父组件。但是当props中接收的是父组件传递的引用类型（对象或者是数组）时，在子组件中对数据改变时，父组件中的数据也会相应的改变，因为两者是指向的同一地址内存。如果不想子组件的改变影响父组件可以利用深拷贝，将接受的数据进行深拷贝后在子组件中使用，而不直接操作接受的数据。深拷贝可以直接利用ES6中的obj=Object。assign（{},myMessage）（在computed中定义），这样子组件的改动将不会影响到父组件。

六、子组件向父组件传递参数（利用事件机制）

子组件通过this.$emit()派发事件，父组件利用v-on进行事件监听，实现参数的传递。

温馨提示：同时当有组件嵌套时则需要利用该机制一层一层的触发到指定层，不然直接在顶层监听子组件的子组件的事件是监听不到的，需要先向父组件派发，父组件在向上层触发

父级

<template>
    <div>
       <child v-on:listenFun="listenFun"></child>
    </div>

</template>
<script>
import Child from './child';
export default{
    components:{
        child
    },
    methods:{
        listenFun(param){//监听事件，接收参数
            console.log(param);//打印结果：hello
        }
    },
    
}
</script>

子级

<template>
    <div>
       <div @click="sendMessage"></div>
    </div>

</template>
<script>
export default{
    methods:{
        sendMessage(){
            this.$emit("listenFun","hello");//派发事件，传递参数
        }
    },
    
}
</script>

（非原创，引用自：vue组件之间的通信以及如何在父组件中调用子组件的方法和属性 - heshan珊 - 博客园）