15. [基础]模板样式绑定2-进阶
这篇文章继续学习 Vue 的模板样式绑定。上篇文章你已经对 Vue 中的样式绑定有一个基本了解。我们预习一下,上节我们学了三种绑定样式的方法:
- 通过普通字符串进行绑定;
- 通过对象的方式进行绑定;
- 通过数组的方式进行绑定。
这篇文章主要学习一下 Vue 中子组件样式的绑定和行内样式如何编写。
子组件的样式绑定
先来看一下子组件如何绑定样式。新建一个文件Demo15.html
,然后把Demo14.html
的内容拷贝到Demo15.html
中。复制好后,编写一个子组件SonCom
,组件中就是展示一个简单的内容。
代码如下:
app.component('sonCom',{ template:` <div>SonCom</div> ` })
有了子组件后,就可以在父组件的模板中进行使用了,使用就是直接写一个类似 html 的标签进去就可以。
template:` <h2 :class="classArray">mybj123.com</h2> <sonCom /> `
如何区分父子组件
在vue.createApp()
方法中用对象形式{ }
配置的一般叫做父组件,而下面使用的其他组件,叫做子组件。你也可以这样理解,主动调用的是父组件,被调用的是子组件。
最简单的为子组件添加样式的方法,就是自己给子组件加上class
。
app.component('sonCom',{ template:` <div class="green">SonCom</div> ` })
这时候子组件的字体颜色就变成了绿色。你还可以把 class 写在调用子组件的地方(也就是写在父组件里),例如下面的代码:
template:` <h2 :class="classArray">mybj123.com</h2> <sonCom class='green' /> `
先去掉子组件里的 class,在调用地方增加 class 样式。这时候效果也是一样的。
子组件使用样式的小坑
这时候我们修改一下子组件,再写一个<div>
进去,里边写上码云笔记
的字样。这时候再来看结果。
app.component('sonCom',{ template:` <div>SonCom</div> <div>码云笔记</div> ` })
你会发现两个<div>
的样式都不起作用了。那我们如何让它变成绿色那,其实只有再两个并列的<div>
外层,加上一个包括性的标签就可以了。也就是说让子组件的最外层只有一个根元素。
app.component('sonCom',{ template:` <div> <div>SonCom</div> <div>码云笔记</div> </div> ` })
这样就又变成了绿色字体。还有一种用到动态绑定的方法,直接绑定属性中的 class。
app.component('sonCom',{ template:` <div :class="$attrs.class">SonCom</div> <div>码云笔记</div> ` })
行内样式的编写
什么是行内样式?就是自己在模板的 DOM 元素上写 CSS 样式,比如下面的这样。
<h2 style="color:orange;">mybj123.com</h2>
除了这种写法以外,Vue 中也为我们扩展了一些内容,让行内样式的写法更直观和另类。你可以直接在 data 中编写样式,比如在 Data 中这样写。
data(){ return{ styleString:'color:orange;' } },
然后用绑定行内样式的形式,在模板中进行绑定。
template:` <h2 :style="styleString">mybj123.com</h2> `
你也可以用对象的形式在 data 中编写 CSS 样式。比如写成下面的代码,然后再进行绑定。
data(){ return{ //..... styleString:'color:orange;', styleObject:{ color:'red', background:'yellow' } } },
在写行内样式的使用,个人觉的对象的写法更加直观和简洁,所以建议小伙伴可以采用这种对象的形式来进行编写。
码云笔记 » 15. [基础]模板样式绑定2-进阶
子组件应该写在什么位置
写在你需要调用的位置
是不是创建局部组件需要写在createApp部分的上面 全局组件需要写在挂载代码的上边 这是为啥