How the vue child component gets the class and style properties set by the parent component
such as the title.
when vue defines a component, you cannot specify properties with the name "class"" or "style"" because these are reserved words.
but use class= "" or style= "" when the parent component wants to use the child component, and the child component is set according to the class and style set by the parent component.
how do I get these two properties in the child component?
(don"t reply if you don"t understand)
nbhtmlword class / style
but the date component didn"t do it on its own in order to save trouble, used element"s date, and encapsulated it again, changed the display style through css, and clicked to bring up the date selection box. As shown in the picture above.
The problem with
is that components that are encapsulated again can only define fonts, font sizes, and so on at the time of encapsulation. When the parent component calls my-date, class or style cannot be set by default
I briefly wrote one. I don't know if you want to achieve this effect.
parent component invokes child component
<com-box v-bind:title="title" v-bind:content="content" class="box-class" style="font-size: 30px;"></com-box>
subcomponent content
<template>
<div class="box-container">
<div class="content">
<h4>{{title}}</h4>
{{content}}
</div>
</div>
</template>
<script type="text/javascript">
export default {
name: 'Box',
data() {
return {
name: 'box'
}
},
props: ['title', 'content'],
methods: {},
created() {
console.log('created')
},
mounted() {
// style,
var fontSize = this.$el.style.fontSize
var h = this.$el.getElementsByTagName('p')[0]
h.style.fontSize = fontSize
},
methods: {
//
setFont () {
var fontSize = this.$el.style.fontSize
var h = this.$el.getElementsByTagName('p')[0]
h.style.fontSize = fontSize
}
}
}
</script>
the idea is wrong, with data as the core to drive the view, rather than using style performance to control other styles.
because of the characteristics of vue, if you want to use vue, to operate dom, you must be familiar with native js, at least js operation dom you should at least know how to check api.
or simply introduce jquery or zepto
sub-component data () {} .
this.$vnode.data has the properties of this node for createElement
1.prop passing values
2.$ref sets the value of the subcomponent or calling method
refer to the method of setting class-name for the iview component. Receive class or style objects that need to be defined through props. But it is not recommended. Does the parent component want to pass class to the word component?
.
this is the third edit.
visually you are using a rich text editor like quillEditor . There should be prefabricated class names that deal with a lot of styles, similar to bootstrap.
according to what you said, you re-encapsulated the date component of element, overwriting css to achieve some display effects.
but write dead, you want to achieve the effect of that rich text editor, change the display style of the date component through class. That's why I asked how to get the class set by the parent component and the style, right?
but the class is either written in the parent component or the child component itself has a corresponding style before the class can take effect.
style is the point of violence, which takes effect directly on the outermost tag of the child component.
then the conclusion is obvious
1, secondary encapsulation when imitating those components, writing a lot of class, in advance is obviously not suitable
2, components accept props, can accept style object writing, can also split attributes such as, fontSize color, etc.
3, if the above are not appropriate, then I do not understand what problem you want to solve. I need you to continue to clarify your needs.
PS: read your previous posts and came here to find solutions or ideas. There are really some people who don't know what to do and don't like them, because they don't know each other very well, so just don't mind.
