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-进阶的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。