Is it possible to let Aurelia render a custom element without the capsulating component node? Or replace the custom-element node with its content?
Example:
app.html
<template>
<require from = "./components/custom-component.html"></require>
<custom-component></custom-component>
</template>
app.ts
export class App {
}
custom-component.html
<template>
<p>This is some text from dynamic component...</p>
</template>
Result
Based on this example: Is it possible with aurelia to render the <p> element from the component as direct child of the <body>, so that there will be no custom-component-node?
Use the containerless attribute on your component.
example: https://gist.run/?id=8e57000c7b8423dc0246a7006d90ba79
you can also decorate your custom components with the containerless() decorator.
see: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/9
Related
when I need to pass some information between child and parent element I use props. But is there a way to pass elements to the component, for example like this
<MyComponent>
<router-link to="/oneOfTheList">OneOfTheList</router-link>
</MyComponent>
Router-Link seems to do it somehow...
How can I specify where the elements will be placed in my component
This is called slot
ComponentA.vue
<div>
<slot></slot>
</div>
ComponentB.vue
<component-a>
<span>test</span> // this part will be shown inside component A's slot tags
</component-a>
Here you go
Is it possible to pass native DOM elements (rendered server-side) to a vue application?
Simple markup:
<div class="c-search"></div>
Will be "mounted" to a vue application by:
new Vue({
render: (h) =>
h(NameOfTheComponent),
}).$mount(document.querySelector('.c-search'););
So far, so good. But what if I want dom elements inside this html container to be passed to the application and render e.g. in a slot?
Markup:
<div class="c-search">
<div class="c-search__disclaimer">
<h1>This disclaimer text is rendered from a cms and should be rendered within the vue application</h1>
</div>
</div>
Currently, I pass the div as a prop and render it by v-html, but this is vulnerable and not recommended by the vue documentation. Is there a way to access child nodes of the application wrapper and re-render?
What I have done so far is created two componenets which are present in src/components folder and I want to add these components which is contained by parent component present in src/views folder.
I have one component named form.vue and another component background.vue
And what I want is, to show the form.vue (which contains a form) on top of backgound.vue (which is for background purpose). So every time, any changes happen in child,forces the whole parent page to re-render. So is there any way to solve this ?
Below are folder structure:
You can use slots for that, so in your background.vue you would have:
<template>
...
<slot><slot> <!-- place where the external component will be rendered -->
...
</template>
and then in the main component, you would have:
<background>
<my-form></my-form>
</background>
create 3 components and call 2 of them into 3rd component.
For example:
You have
component1.vue
component2.vue
component3.vue
In component3.vue:
<script>
//import components
import componentOne from '/path/to/component1'
import componentTwo from '/path/to/component2'
//now register them locally to use them in this component
export default{
components:{componentOne, componentTwo}
}
//now call these components in <template> section using kebab case
<template>
<div>
<component-one /> //camelCAse name of component in <script> tag is used in kebab case in template section
<component-two /> // means componentTwo will called as <component-two/>
</div>
</template>
</script>
Need to pass component to child component, using props or you have better way to solve this problem
I registered component needed to pass globally or just registered this component locally. But these solutions can't solve my problem.
Here is my code to register component needed to pass locally:
a.vue html
<dropdown :icon="UserIcon"></dropdown>
a.vue js
components: {'dropdown', Dropdown, 'icon-user': UserIcon}
dropdown.vue html
<div class="dropdown"><icon></icon></div>
dropdown.vue js
props: ['icon']
UserIcon.vue
<i class="user-icon"></i>
the browser reminds me that icon is unknown custom element. It seems like vue does not support this way to use component, doesn't it?
I solve this problem using slot.
and there is another question comes...
a.vue
<dropdown><template v-slot:icon><icon-user></icon-user></template></dropdown>
dropdown.vue
<div class="dropdown"><slot name="icon"></slot></div>
But icon-user component didn't show...
and I did this work, cuz I remove the name attribute of slot.
a.vue
<dropdown><template><icon-user></icon-user></template></dropdown>
dropdown.vue
<div class="dropdown"><slot></slot></div>
From the docs:
Because v-if is a directive, it has to be attached to a single
element. But what if we want to toggle more than one element? In this
case we can use v-if on a element, which serves as an
invisible wrapper. The final rendered result will not include the
element.
But on my template in my component:
<template v-if="false">
<div>
....
</div>
</template>
But the component still renders.
I ask because I want a hook on the component so if v-if is true, I can do some code in beforeMounted and beforeDestroyed if false.
If I undestood what are you doing...
You're putting v-if int the template tag ina .vue file right?
Like this
// component.vue
<template v-if="false">
<div>
My Component
</div>
</template>
<script>
export default {
name: 'my-component'
};
</script>
<styles>
</styles>
Right?
If YES, you are doing it wrong.
The template there is a tag for Webpack Vue Loader to load the component template.
So the if must go inside the template tag.
// component.vue
<template>
<div v-if="false">
My Component
</div>
</template>
<script>
export default {
name: 'my-component'
};
</script>
<styles>
</styles>
If you need to "hide" multiple elements, just encapsulate into another div.
As Lucas Katayama said, you cannot use v-if inside SFC, but another way to hide you component is use v-if on this component in its parent component.
Your reference to the docs is correct, you can use a v-if on a template tag. However, I believe conditionals on the top-level <template> in a Single File Component are ignored.
To achieve the effect showed in the docs (conditional render a template) that template needs to be within the top-level template section.
Example:
<script>
// your script section
</script>
<template>
<template v-if="false">
<div>
....
</div>
</template>
</template>
<style>
// your style section
</style>