[基础]模板样式绑定2-进阶

场景
子组件的样式绑定
如何区分父子组件
子组件使用样式的小坑
行内样式的编写

场景

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

上节我们学了三种绑定样式的方法：

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

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

子组件的样式绑定

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

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

template:`<h2 :class="classArray">willem</h2><sonCom />`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><script src="https://unpkg.com/vue@next" ></script><style>.red{color:red !important;}.green{color:green;}.background{ background-color: orange;}</style>
</head>
<body>
<div id="app"></div><script>const app = Vue.createApp({data() {return {classString: 'red',classObject:{red:true,background:true},classArray:['green','background',{red:true}],}},template: `<h2 v-bind:class="classArray"> hello </h2><sonCom />`});app.component('sonCom',{template:`<div>SonCom</div>`});const vm = app.mount("#app");
</script>
</body>
</html>

如何区分父子组件

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

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

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

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

例如下面的代码:

template:`<h2 :class="classArray">willem</h2><sonCom class='green' />`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><script src="https://unpkg.com/vue@next" ></script><style>.red{color:red !important;}.green{color:green;}.background{ background-color: orange;}</style>
</head>
<body>
<div id="app"></div><script>const app = Vue.createApp({data() {return {classString: 'red',classObject:{red:true,background:true},classArray:['green','background',{red:true}],}},template:`<h2 :class="classArray">willem</h2><sonCom class='green' />`});app.component('sonCom',{template:`<div>SonCom</div>`});const vm = app.mount("#app");
</script>
</body>
</html>

先去掉子组件里的class，在调用地方增加class样式。

这时候效果也是一样的。

子组件使用样式的小坑

这时候我们修改一下子组件，再写一个<div>进去，里边写上willem笔记的字样。

这时候再来看结果。

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

你会发现两个<div>的样式都不起作用了。

那我们如何让它变成绿色那，其实只有再两个并列的<div>外层，加上一个包括性的标签就可以了。

也就是说让子组件的最外层只有一个根元素。

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><script src="https://unpkg.com/vue@next" ></script><style>.red{color:red !important;}.green{color:green;}.background{ background-color: orange;}</style>
</head>
<body>
<div id="app"></div><script>const app = Vue.createApp({data() {return {classString: 'red',classObject:{red:true,background:true},classArray:['green','background',{red:true}],}},template:`<h2 :class="classArray">willem</h2><sonCom class='green' />`});app.component('sonCom',{template:`<div><div>SonCom</div><div>willem笔记</div></div>`})const vm = app.mount("#app");
</script>
</body>
</html>

这样就又变成了绿色字体。

还有一种用到动态绑定的方法，直接绑定属性中的class。

app.component('sonCom',{template:`<div :class="$attrs.class">SonCom</div><div>willem笔记</div> `
})

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><script src="https://unpkg.com/vue@next" ></script><style>.red{color:red !important;}.green{color:green;}.background{ background-color: orange;}</style>
</head>
<body>
<div id="app"></div><script>const app = Vue.createApp({data() {return {classString: 'red',classObject:{red:true,background:true},classArray:['green','background',{red:true}],}},template:`<h2 :class="classArray">willem</h2><sonCom class='green' />`});app.component('sonCom',{template:`<div :class="$attrs.class">SonCom</div><div>willem笔记</div> `})const vm = app.mount("#app");
</script>
</body>
</html>

行内样式的编写

什么是行内样式？
就是自己在模板的DOM元素上写CSS样式，

比如下面的这样：

<h2 style="color:orange;">willem</h2>

除了这种写法以外，Vue中也为我们扩展了一些内容，让行内样式的写法更直观和另类。你可以直接在data中编写样式，

比如在Data中这样写：

data(){return{styleString:'color:orange;'}
},

然后用绑定行内样式的形式，在模板中进行绑定。

template:`<h2 :style="styleString">willem</h2>
`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><script src="https://unpkg.com/vue@next" ></script><style>.red{color:red !important;}.green{color:green;}.background{ background-color: orange;}</style>
</head>
<body>
<div id="app"></div><script>const app = Vue.createApp({data(){return{styleString:'color:orange;'}},template:`<h2 :style="styleString">willem</h2>`});const vm = app.mount("#app");
</script>
</body>
</html>

你也可以用对象的形式在data中编写CSS样式。

比如写成下面的代码，然后再进行绑定。

data(){return{styleString:'color:orange;',styleObject:{color:'red',background:'yellow'}}
},

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><script src="https://unpkg.com/vue@next" ></script><style>.red{color:red !important;}.green{color:green;}.background{ background-color: orange;}</style>
</head>
<body>
<div id="app"></div><script>const app = Vue.createApp({data(){return{styleString:'color:orange;',styleObject:{color:'red',background:'yellow'}}},template:`<h2 :style="styleObject">willem</h2>`});const vm = app.mount("#app");
</script>
</body>
</html>

15 Vue中子组件样式的绑定和行内样式模版编写相关推荐

【Vue框架】Vue绑定样式及案例之行内样式——对象绑定样式与数组控制样式（附带源码案例)
文章目录一.Vue样式绑定 1.1 Vue绑定class样式 1.2 Vue绑定行内样式 1.2.1 对象控制绑定样式 1.2.2 数组控制绑定样式 1.3 Vue绑定样式案例(标题排他) 1.4 ...
操作行内样式-对象语法//操作行内样式-数组语法
操作行内样式-对象语法 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
html行内样式修改,HTML的行内样式演示案例
在讲html的行内样式之前,首先跟大家说明一下什么叫做样式.所谓样式就是用来修饰网站页面的,使得页面更加好看有特效,从而提升用户的浏览体验.Html的样式主要分为三种形式,分别是今天咱们就将html ...
html行样式怎么写,html行内样式字号怎么写
在html中,行内样式字号的写法是"".可以使用style属性规定元素的行内样式(inline style),该属性将覆盖任何全局的样式设定. 本教程操作环境:windows7系统 ...
在vue中怎么写行内样式高_13.VUE学习之控制行内样式
vue 测试一测试二测试三 var app = new Vue({ el: "#vue", data:{ red:"red", size:28, div2: ...
干货来袭！CSS的行内样式与内联样式，看完就会了
什么是行内样式行内样式,其实从它的名字就可以看出来它的特点,就是直接在 HTML 标签中使用 style 属性设置 CSS 样式.例如像下面这样的: <p style="font-s ...
react中jsx行内样式（style）的国定写法、jsx双花括号{{}}写法的解释
共index.js.index.html. TodoList.js这三个文件,主要看TodoList.js中的Input标签的style样式双花括号{{}}的写法,会在下方做全面的解释运行效果: i ...
CSS引入方式-内部样式表、行内样式表、外部样式表
CSS引入方式内部样式表(嵌入式) 内部样式表就是将CSS在写html页面内部.是将所有的CSS代码抽取出来,单独放到一个<style>标签中.例如: <style>div{ ...
iframe调用父页面方法_5.1 vue中子组件调用父组件的方法，务必理解自定义事件的重要性...
问题:vue中子组件调用父组件的方法通过v-on 监听和$emit触发来实现: 1.在父组件中通过v-on 监听当前实例上的自定义事件. 2.在子组件中通过'$emit'触发当前实例上 ...

15 Vue中子组件样式的绑定和行内样式模版编写