vue通过ref调用子组件的属性或者函数

    <left ref="myLeft"></left>

    handleChangeNum(){

      this.$refs.myLeft.handleChangeNum(); //调用组件的实例方法

      this.$refs.ff.style.color="red"  //更改组件的dom元素

    }

<template>
  <div class="hello">
    <left ref="myLeft"></left>

    <h2 ref="ff">col</h2>
  </div>
</template>

<script>

import left from '@/components/left'

export default {
  name: 'HelloWorld',
  components:{
    left:left
  },
  props: {
    msg: String
  },
  data(){
    return {
      message:"hello vue.js",
      userInfo:{name:'wsc',age:18},
      count:0
    }
  },
  mounted(){
   let ref=this.$refs;
   console.log(ref);
  },
  methods:{

    handleChangeNum(){
      this.$refs.myLeft.handleChangeNum();
      this.$refs.ff.style.color="red"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>