Vue组件化学习之scoped详解
目录
- 简介
- 总结
简介
主要介绍scoped的作用。
先弄一个案例：
main.js：
//引入vue依赖
import Vue from 'vue'
//引入组件App
import App from './App.vue'
// 关闭生产提示
Vue.config.productionTip = false
//创建一个vue实例
new Vue({
//这个目前还没学过，先知道他的作用是将app放入容器中。
render: h => h(App),
//配置该vue实例管理id为app的容器
}).$mount('#app')
App.vue：
<template>
<!-- 编写结构 -->
<div>
<school></school>
<hr>
<student></student>
</div>
</template>
<script>
// 原本的引入
// import school from "./School.vue"
// import student from "./Student.vue"
//修改后的
//引入school组件和student组件,涉及es模块化的语法
import school from "./components/School.vue"
import student from "./components/Student.vue"
export default {
components:{
//注册组件
school,
student
}
}
</script>
<style>
</style>
School.vue：
<template>
<!-- 编写组件结构代码，也就是html代码 -->
<!-- 需要一个div括住，也就是只能有一个根元素，一般使用div -->
<div class="orange">
<div>学校：{{schoolName}}</div>
<div>地址：{{schoolAddress}}</div>
</div>
</template>
<script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {
data() {
return {
schoolName:"尚硅谷",
schoolAddress:"北京"
}
},
}
</script>
<style>
/* 编写样式的地方 */
.orange{
background-color: orange;
}
</style>
student.vue：
<template>
<!-- 编写组件结构代码，也就是html代码 -->
<!-- 需要一个div括住，也就是只能有一个根元素，一般使用div -->
<div class="orange">
<div>学生姓名：{{studentName}}</div>
<div>年龄：{{studentAge}}</div>
</div>
</template>
<script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {
data() {
return {
studentName:"张三",
studentAge:18
}
},
}
</script>
<style>
/* 编写样式的地方 */
.orange{
background-color: gray;
}
</style>
效果：
看两个组件的样式代码，都使用了同名的orange类来设置样式，但是一个设置背景颜色为橙色，一个为灰色，父组件App最后会汇总所有子组件中的样式，这样的话，这两个样式设置就冲突了，所以导致School组件的背景色本来应该是橙色的，但是变成灰色了。
所以，引入scoped的作用:使样式在局部生效，防止冲突。
添加在style标签中的，
结果：
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
发布订阅模式在vue中的实际运用实例详解
订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态. 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学,可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key]
-
Vue发布订阅模式实现过程图解
vue项目中不同组件间通信一般使用vuex,通常情况下vuex和EventBus不应该混用,不过某些场景下不同组件间只有消息的交互,这时使用EventBus消息通知的方式就更合适一些. 图解 html <body> <script src="./Dvue.js"></script> <script> const app = new DVue({ data: { test: "I am test", foo: { bar
-
Vue组件中的自定义事件你了解多少
主要介绍组件的自定义事件的概念,使用等. 何为组件自定义事件: 组件自定义事件是一种组件间的通信方式,方向是 子组件====>父组件. 使用场景:A是子组件,B是父组件,如果要把B的数据传给A,可以使用props配置项,如果要把A的数据转给B,就要用到组件自定义事件或者使用props加回调函数也可实现. 先使用props加回调函数实现子组件传递数据给父组件. main.js: //引入vue依赖 import Vue from 'vue' //引入组件App import App from '.
-
vue总线机制(bus)知识点详解
vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同. bus适合小项目.数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了.bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件. vuex适用中大型项目.数据在多组件之间公用的情况. 简单介绍两者的区别之后,就要介绍下我在一个项目中遇到的一个场景了,这个场景使用bus可能更加适合些: //
-
Vue组件之事件总线和消息发布订阅详解
目录 简介 事件总线 消息的发布订阅 总结 简介 主要介绍事件总线的定义和编写方法和Vue是如何实现消息的订阅与发布的. 事件总线 事件总线是组件间通信的一种方式,适用于任意组件间的通信,比如毫不相干的两个组件.父子组件间.后代组件等等,都能通信. 事件总线有两个特性: 是一个vue组件实例或者一个vue实例,充当一个消息中转站,如果A.B组件想要通信,那么A组件存消息到中转站,B消息拿,或者反过来. 所有组件都要能获取到事件总线. 如果A.B组件间通信,如果A发送数据给B的情况下,需要以下步骤
-
vue之bus总线简单使用讲解
vue之bus总线的简单使用 场景描述: A组件中包括B,C组件,而B组件中包括D组件,这时如果D组件想要在A组件中触发C组件的方法怎么办呢? 当然方案是有的,用状态管理vuex可以,用$emit传递也可以,但是我想试着用的是bus总线的方式: 如下: D组件中触发bus的emit ,然后在A组件中用bus总线的on来触发方法: D组件中 dataLoad(){ console.log('加载完触发事件'); this.$bus.$emit('itemDataLoad') // this.$bu
-
Vue组件化学习之scoped详解
目录 简介 总结 简介 主要介绍scoped的作用. 先弄一个案例: main.js: //引入vue依赖 import Vue from 'vue' //引入组件App import App from './App.vue' // 关闭生产提示 Vue.config.productionTip = false //创建一个vue实例 new Vue({ //这个目前还没学过,先知道他的作用是将app放入容器中. render: h => h(App), //配置该vue实例管理id为app的容
-
vue组件间通信子与父详解（二）
接着vue组件父与子通信详解继续学习. 二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } } ②绑定事件处理函数 事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发
-
vue组件间的参数传递实例详解
场景分析 在前端开发中,我们常常会运用到"组件库".在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等.只需要在引入的组件中写入特定的属性,就能够定义. 举例说明 例如:element-ui组件库中使用switch开关,有个属性active-color是设置"打开时"的背景色.change事件是触发状态的事件. <el-switch v-model="value" :active-color=&quo
-
vue组件三大核心概念图文详解
前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,
-
vue组件 keep-alive 和 transition 使用详解
1.keep-alive 能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. // 组件 export
-
Vue组件之间四种通信方式详解
目录 前言 父子组件通信 父组件与子孙组件的通信 父组件获取子组件数据 无需考虑组件关系的通信 前言 vue 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组件数量原来越多,组件之间难免需要相互通信,那么如何实现组件之间的通信呢?下面介绍 vue 组件通信的几种方法 父子组件通信 父组件传递 props 给子组件(数据以及改变数据的方法),子组件通过 $emit 来更新父组件的状态 父组件定义,声明状态 { name: 'baidu.com' } 以及可以改
-
vue组件父与子通信详解（一）
本文实例为大家分享了vue组件父与子通信的具体代码,供大家参考,具体内容如下 一.组件间通信(父组件 --> 子组件) 步骤: ①父组件在调用子组件 传值 <child-component myValue="123"> </child-component> ②在子组件中 获取父组件传来的值 Vue.component('child-component',{ props:['myValue'], template:'' }) 代码1: <!do
-
Vue组件的继承用法示例详解
目录 Vue组件的继承用法 Vue组件的继承用法 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜参数的需要多重的判断,这样会导致封装的组件比较繁杂,出现过多的判断,用继承可以改写基类中的方法和数据 基类案例: <template> <div class="hello"> 父类:{{name}} <span>{{title}}</sp
-
Vue组件库发布到npm详解
制作了一套自己的组件库,并发布到npm上,项目代码见https://github.com/hamger/hg-vcomponents 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd hg-vcomponents cnpm install 目录结构 - vue-flag-list + build + dist // 存放发布到npm的代码 - src - components // 存放组件源代码 和 README.
-
vue组件文档生成备注详解
目录 vue组件文档生成备注 内容实现 Vuese自动生成vue组件文档 安装Vuese 在根目录下新增配置文件 .vueserc 在package.json新增脚本,并启动 vue组件文档生成备注 在我们团队开发时一定会有一些公共组件诞生出来,那么这些诞生出来的组件我们要怎么让别人知道并且使用呢.写一个专门维护的文档页面?专人去维护?还是选择一个线上公共word的更新上去? 其他的我就不说什么优缺点了 自己体会 我只说一下我们团队中是怎么维护这些公共组件的. 说之前我们先了解一下这个插件vue