Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use ref features in Vue", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use ref features in Vue" article.

1. Basic use of ref

The use of hello for ref

If you use it on a normal DOM element, the reference points to the DOM element. If used on a child component, the reference points to the component instance.

In-depth understanding of $refs

The $refs of a component contains all the ref of the component, see the following example

Hello

Vue.component ('child-component', {template:' child-component'}) let vm = new Vue ({el:'# app'})

From the picture above, we can easily find out

Vm.$refs returns an object with two members that contains all the ref of the vm instance

Vm.$refs.p is a DOM element

Vm.$refs.child is a component instance

II. Actual combat: obtaining the sub-component data through ref

Look at the following example

{{sum}} / / counter component to add 1Vue.component ('counter', {template:' {{count}}', data () {return {count: 0}, methods: {handleClick () {this.count + = 1) for each click This.$emit ('change')}) let vm = new Vue ({el:' # app', data: {sum: 0}, methods: {handleChange () {this.sum = this.$refs.child1.count + this.$refs.child2.count / / using refs to obtain data})) these are the contents of this article on "how to use the ref feature in Vue" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.