7/20/2023 0 Comments Vue router button![]() Note that in our case we just put a simple string in the slot because that is all we required. ![]() Remember, this needs to be done before mounting the instance. That is the exact key we’ll modify on the instance to set our button’s inner text. And if named slots are not used, then slots are available on $fault as an array. If you have used slots in Vue.js, you might be aware that the slots are accessible on any instance on the $slots property. But now how do we pass it? Setting the Slot We simply wrote the inner text between the tags and it rendered inside the final button tag with the help of slot. With the normal template method, we used button like: Click me!. We are almost done, with one final remaining bit. For passing props, there is a key called propsData which we can use, like so: import Button from 'Button.vue' The Vue constructor function accepts an options object that we can use to pass in and initialize related things. Next, I had to pass some props to my Button instance. Second, to get the native DOM element reference from a Vue component instance, you can use the $el property. You specify an attribute on the DOM element you want to reference ( in this case) and then that element is available on the set key on component’s $refs property. There are a couple of things to note in the code above.įirst, $refs is the recommended way to get reference to a DOM element in Vue.js. That’s what I did: import Button from 'Button.vue' If elementOrSelector argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself. I wanted to insert my component instances inside some DOM element. it replaces the passed element with the component instance). Inserting in DOMĮvery Vue instance has a method called $mount on it which mounts the component instance on the element you pass to it (i.e. Hooray! Step 1 cleared! Now we need to insert it in the DOM. Now we can create an instance out of it with the new keyword: import Button from 'Button.vue' The way to do that is to pass the component object to Vue.extend to create a subclass of the Vue constructor. Or, in simple terms, a constructor function. If I do this: import Button from 'Button.vue' But if you notice carefully the script block in any of the above component code, they are all exporting a simple object, and not a class (constructor function). The very first idea I had to create a dynamic instance of a given component was to pass it to new and it would give me the actual instance. So I needed a way to dynamically create component instance for any passed component and insert it in the DOM, during runtime. This information is only available at runtime. In my case, I don’t know which component to insert in the template and also where to insert it. To use it in another component, all you have to do is import the Button component and insert its tag in the template: ![]() Normally if you are working with the recommended Single File Component style, you would have a Button component like so: This article aims to illustrate how different aspects of using components in a template, such as instantiation, props passing, slots, mounting, translate to JavaScript code. By programmatically, I mean you create and insert the components completely from JavaScript, without writing anything in the template. I have been on a Vue.js project that required the ability to create components programmatically. If you are new to Vue, then this CSS-Tricks series is a good place to start. ![]() This article assumes basic understanding of Vue.js framework and how to create components in it. ![]()
0 Comments
Leave a Reply. |