15. [基础]模板样式绑定2

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196870.html

1. 子组件的样式绑定
• 如何区分父子组件
2. 子组件使用样式的小坑
3. 行内样式的编写

这篇文章继续学习 Vue 的模板样式绑定。上篇文章你已经对 Vue 中的样式绑定有一个基本了解。我们预习一下，上节我们学了三种绑定样式的方法：

• 通过普通字符串进行绑定；
• 通过对象的方式进行绑定；
• 通过数组的方式进行绑定。

这篇文章主要学习一下 Vue 中子组件样式的绑定和行内样式如何编写。

子组件的样式绑定

先来看一下子组件如何绑定样式。新建一个文件Demo15.html，然后把Demo14.html的内容拷贝到Demo15.html中。复制好后，编写一个子组件SonCom，组件中就是展示一个简单的内容。

代码如下：

app.component('sonCom',{
    template:`
        <div>SonCom</div>
    `
})

有了子组件后，就可以在父组件的模板中进行使用了，使用就是直接写一个类似 html 的标签进去就可以。

template:`
    <h2 :>mybj123.com</h2>
    <sonCom />
`

如何区分父子组件

在vue.createApp()方法中用对象形式{ }配置的一般叫做父组件，而下面使用的其他组件，叫做子组件。你也可以这样理解，主动调用的是父组件，被调用的是子组件。

最简单的为子组件添加样式的方法，就是自己给子组件加上class。

app.component('sonCom',{
    template:`
        <div >SonCom</div>
    `
})

这时候子组件的字体颜色就变成了绿色。你还可以把 class 写在调用子组件的地方（也就是写在父组件里），例如下面的代码:

template:`
    <h2 :>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 :>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'
        }
    }
},

在写行内样式的使用，个人觉的对象的写法更加直观和简洁，所以建议小伙伴可以采用这种对象的形式来进行编写。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/