Vue之ref的使用

1.基本用法，本页获取Dom元素节点

<template>
    <div>
    <div ref="refClass">元素内容</div>
    <button @click="handleTextDom">获取div节点</button>
  </div>
</template>

<script>
    export default {
    methods: {
      handleTextDom(){
        console.log(this.$refs.refClass);
      }
    }
  }
</script>

// 输出
<div元素内容></div>

ref除了可以获取本页面的dom元素，还可以拿到 子组件中 的data 和 去调用子组件中的方法.

2.获取子组件的Data

/// 子组件
<template>
    <div>{{msg}}</div>
</template>
<script>
export default {
  data(){
    return {
      msg: "我是子组件"
    }
  }
}
</script>

/// 父组件
<template>
    <div>
    <comment-Item ref="childData"></comment-Item>
    <button @click="handleTextDom">获取子组件data</button>
  </div>
</template>
<script>
import commentItem from '../../components/comment_item.vue'
export default {
  components:{
    commentItem
  },
  methods: {
    handleTextDom(){
      console.log(this.$refs.childData.msg);
    }
  }
}
</script>

/// 输出
我是子组件

3.父组件调用子组件中的方法

/// 子组件
<template>
    <div></div>
</template>

<script>
    export default {
    methods: {
      open(){
        console.log('子组件 - 方法被调用～');
      }
    }
  }
</script>

/// 父组件
<template>
    <comment-Item ref="childData"></comment-Item>
    <button @click="handleTextDom">获取子组件中的方法</button>
</template>
<script>
    import commentItem from '../../components/comment_item.vue'
  export default {
    components:{
      commentItem
    },
    methods:{
      handleTextDom(){
        // 调用子组件中的open()方法
        this.$refs.childData.open()
      }
    }
  }
</script>

/// 输出
子组件 - 方法被调用～

4.子组件调用父组件中的方法

(操作逻辑：子组件触发一个自定义事件，然后父组件监听这个事件)

/// 子组件
<script>
    export default {
    methods: {
      open(){
        // 子组件调用父组件事件
        this.$emit("fatherClick")
      }
    }
  }
</script>

/// 父组件
<template>
    <div>
    <comment-Item ref="childData" @fatherClick="handelClick"></comment-Item>
    <button @click="handleTextDom">获取子组件中的方法</button>
  </div>
</template>

<script>
import commentItem from '../../compoents/comment_item.vue'
  export default {
    components : {
      commentItem
    },
    methods: {
      handleTextDom(){
        this.$refs.childData.open()
      },
      handleClick(){
        console.log('我是父组件方法')
      }
    }
  }
</script>

子组件的方法, 触发了一个自定义事件, 这个自定义事件 触发了 父组件中的方法。

/// 输出
我是父组件方法