Ref defines the value, and the DOM or component object is retrieved via the $refs. value

1 Obtain the native DOM label

</button @click="fn"> </button> </div> </template> <script> export default { methods: { fn() { console.log(this.$refs.myH1); // <h1></h1> The native DOM tag this.$refs.myh1. innerHTML = "change the content "; } } } </script>Copy the code

Get the component object and do whatever you want

<div> <p :style="{ color: ind == 0 ? 'red' : ' '} "> < / p > < p: home page style =" {color: ind = = 1? Classification of 'red' : ' '} "> < / p > < p: style =" {color: ind = = 2? </p> </div> </template> <script> export default {data() {return {ind: 0,}; }, methods: { changeIndex(index) { this.ind = index; ,}}}; </script> <style> </style>Copy the code
</h1> < button@click ="fn2"> Click on the last highlight in the demo component </button> < demo ref="de"></ demo >< script> import demo from "./components/Demo"; export default { components: { Demo, }, methods: { // ... Omit fn2() {this.$refs.de.changeIndex(2); ,}}}; </script>Copy the code