局部生效vue（如何理解vue中的全局组件和局部组件）

本文目录

• 如何理解vue中的全局组件和局部组件
• vue 引入全局组件/局部引入
• Vue怎样进行局部作用域&模块化
• 在vue组件中如何实现全局注册和局部注册
• 局部安装并使用vue-cli（或者其他npm包）
• vue定义全局指令和局部指令

如何理解vue中的全局组件和局部组件

vue中的全局组件指的是可以在应用程序中的任何位置使用的组件，而局部组件指的是未在全局组件中注册的组件，因此只能使用于局部。
在Vue中组件的出现是为了拆分Vue实例的代码量，让我们以不同的组件来划分不同的功能模块。在代码中我们需要何种功能就去调用相应的组件就可以了。接下来要介绍的是全局组件和局部组件的区别，具有一定的参考作用，希望对大家有所帮助。
【推荐教程：Vue教程】
全局组件指的是可以在应用程序中的任何位置使用的组件，包括在其他组件中
局部组件指的是未在全局组件中注册的组件，因此只能在注册它的组件上使用
例：
《div id="app"》
《contact-us》《/contact-us》
《/div》Vue.component(’contact-us’, {data: function() {
return {
email: ’info@mycompany.com’
};
},
template: `
《div》
《h1》Contact Us《/h1》
《p》Please send an e-mail to: {{ email }}《/p》
《/div》
`});new Vue({el: ’#app’,});上述代码的组件实际上是一个全局组件，因为我们在全局Vue对象上使用组件方法去注册它。这样就意味着我们可以随意的使用它。
如何将全局组件设置成局部组件
先将组件对象存储在变量中
var contactUs = {data: function() {
return {
email: ’info@mycompany.com’
};
},
template: `
《div》
《h1》Contact Us《/h1》
《p》Please send an e-mail to: {{ email }}《/p》
《/div》
`};然后在Vue实例中，我们可以添加一个components属性，其中包含我们想要局部注册的组件。此属性应该是一个对象，并包含标记名称和配置对象的键值对。
new Vue({
el: ’#app’,
components: {
’contact-us’: contactUs
}});请注意，在此示例中，已将components属性添加到Vue实例，但也可以将其添加到另一个组件。
运行代码后会看到该组件已经正常工作了。但是为了证明该组件是局部的而不是全局的将添加另一个Vue实例并更改现有实例的选择器。
new Vue({
el: ’#app1’,
components: {
’contact-us’: contactUs
}});new Vue({el: ’#app2’,});《div id="app1"》
《contact-us》《/contact-us》
《/div》
《div id="app2"》
《contact-us》《/contact-us》
《/div》
现在我们只看到一次呈现的联系人组件，即使我们在模板中使用了两次标签。
它出现在第一个Vue实例中，因为我们已将其注册为局部组件，但第二个Vue实例不知道如何处理标记。查看一下浏览器的控制台，浏览器报错说未注册该组件
因此，要注册全局组件，请使用Vue.component方法，对于局部组件，应使用Vue实例或其他组件中的components属性。
总结：

vue 引入全局组件/局部引入

（一 ）全局组件引入

1，新建demo.vue

2,在main.js里面引入

//引入全局组件

import commonfrom ’./view/tshy/official/common’

Vue.component(’common’,common)

3，在需要用的组件引入

《common》《/common》

（二），组件引入

import MyComponent from ’./view/tshy/official/common’;

components: {MyComponent}

Vue怎样进行局部作用域&模块化

这次给大家带来Vue怎样进行局部作用域 & 模块化，Vue进行局部作用域 & 模块化的注意事项有哪些，下面就是实战案例，一起来看一下。
CSS Modules 为每一个局部类赋予全局唯一的类名，这样组件样式间就不会相互影响了。如：
/* button.css */
.button {
font-size: 16px;
}
.mini {
font-size: 12px;
}它会被转换为类似这样：
/* button.css */
.button__button--d8fj3 {
font-size: 16px;
}
.button__mini--f90jc {
font-size: 12px;
}当导入一个 CSS 模块文件时，它会将局部类名到全局类名的映射对象提供给我们。就像这样：
import styles from ’./button.css’
// styles = {
// button: ’button__button--d8fj3’,
// mini: ’button__mini--f90jc’
// }
element.innerHTML = ’《button class="’ + styles.button + ’ ’ + styles.mini + ’" /》’vue-css-modules ：简化类名映射
下面是一个使用了 CSS Modules 的按钮组件：
《template》
《button :class="{
’global-button-class-name’: true,
: true,
: mini
}"》点我《/button》
《/template》
《script》
import styles from ’./button.css’
export default {
props: { mini: Boolean },
data: () =》 ({ styles })
}
《/script》的确，CSS Modules 对于 Vue 组件是一个不错的选择。但也存在以下几点不足：
你必须在 data 中传入 styles
你必须使用 styles.localClassName 导入全局类名
如果有其他全局类名，你必须将它们放在一起
如果要和组件的属性值绑定，就算局部类名和属性名一样，也要显式指定
对于上面的按钮组件，使用 vue-css-modules 后：
《template》
《button
class="global-button-class-name"
styleName="button :mini"》
点我
《/button》
《/template》
《script》
import CSSModules from ’vue-css-modules’
import styles from ’./button.css’
export default {
mixins: ,
props: { mini: Boolean }
}
《/script》现在：
你不必在 data 中传入 styles ，但得在 mixins 中传入 styles :full_moon_with_face:
你可以跟 styles.localClassName 说拜拜了
将局部类名放在 styleName 属性，全局类名放在 class 属性，规整了许多
局部类名绑定组件同名属性，只需在其前面加上 : 修饰符
修饰符
@button
《button styleName="@button"》按钮《/button》这等同于：
《button styleName="button" data-component-button="true"》按钮《/button》这让你能在外部重置组件的样式：
.form {
font-size: 20px;
}$type
《button styleName="$type"》按钮《/button》这等同于：
《button :styleName="type"》按钮《/button》:mini
《button styleName=":mini"》按钮《/button》这等同于：
《button :styleName="mini ? ’mini’ : ’’"》按钮《/button》
disabled=isDisabled
《button styleName="disabled=isDisabled"》按钮《/button》这等同于：
《button :styleName="isDisabled ? ’disabled’ : ’’"》按钮《/button》使用方法
在 Vue 模板中使用
引入模板外部的 CSS 模块
《template》
《button
class="global-button-class-name"
styleName="button :mini"》
点我
《/button》
《/template》
《script》
import CSSModules from ’vue-css-modules’
import styles from ’./button.css’
export default {
mixins: ,
props: { mini: Boolean }
}
《/script》使用模板内部的 CSS 模块
《template》
《button
class="global-button-class-name"
styleName="button :mini"》
点我
《/button》
《/template》
《script》
import CSSModules from ’vue-css-modules’
export default {
mixins: ,
props: { mini: Boolean }
}
《/script》
《style module》
.button {
font-size: 16px;
}
.mini {
font-size: 12px;
}
《/style》在 Vue JSX 中使用
import CSSModules from ’vue-css-modules’
import styles from ’./button.css’
export default {
mixins: ,
props: { mini: Boolean },
render() {
return (
《button styleName="@button :mini"》点我《/button》
)
}
}在 Vue 渲染函数中使用
import CSSModules from ’vue-css-modules’
import styles from ’./button.css’
export default {
mixins: ,
props: { mini: Boolean },
render(h) {
return h(’button’, {
styleName: ’@button :mini’
}, ’点我’)
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
使用JS操作图片只留黑白色
封装Vue2路由导航钩子并在实战中使用

在vue组件中如何实现全局注册和局部注册

下面我就为大家分享一篇vue 组件 全局注册和局部注册的实现，具有很好的参考价值，希望对大家有所帮助。
全局注册，注册的组件需要在初始化根实例之前注册了组件；
局部注册，通过使用组件实例选项注册，可以使组件仅在另一个组件或者实例的作用域中可用：
全局组件
js
Vue.component(’tab-title’,{
props:,
template:’《li v-on:click="$emit(\’change\’)"》{{title}}《/li》’
})
Vue.component(’tab-content’,{
props:,
template:’《p》{{content}}《/p》’
})局部组件demo：
html
《p id="app"》
《ul class="navTab"》
《li v-for="(navTab,index) in navTabs" is="tab-title" v-bind:info="navTab.text" v-bind:class="{active:navTab.isActive}" v-on:addactive="switchActive(index)"》《/li》
《/ul》
《p class="tabContent"》
《p v-for="navTab in navTabs" is="tab-content" v-bind:content="navTab.tabContent"
v-bind:class="" v-if="navTab.isActive"》《/p》
《/p》
《/p》js
var app=new Vue({
el: ’#app’,
components: {
’tab-title’: {
props:,//接受父元素传递的参数
template:’《li v-on:click="$emit(\’addactive\’)"》{{info}}《/li》’//点击时传递通过$emit子元素传递给父元素调用 addactive方法（不能使用驼峰写法）
},
’tab-content’:{
props:,
template:’《p》{{content}}《/p》’
}
},
methods:{
switchActive:function(index){
for(var i=0;i《this.navTabs.length;i++){
this.navTabs.isActive=false;
}
this.navTabs.isActive=true;

}
},
data:{
navTabs:[
{
text:"tab1",
isActive:true,
tabContent:’this is tab1 content’
},
{
text:"tab2",
isActive:false,
tabContent:’this is tab2 content’
},
{
text:"tab3",
isActive:false,
tabContent:’this is tab3 content’
}
]
}
});组件实例的作用域是孤立的。这意味着不能再子组件的模板内直接引用父组件的数据。要让子组件可以使用父组件的数据，我们需要通过子组件的props选项。
子组件要显式地用 props 选项声明它期待获得的数据
在模板中，要动态地绑定父组件的数据到字模板的props,与绑定到任何普通的HTMO特性相类似。就是使用 v-bind。每当父组件的数据变化时，该变化也会传递给子组件：
所有的vuejs组件都是被扩展的vue实例
每一个Vue实例都会代理这个实例的data属性对象里的所有的属性
所有的Vue实例本身保罗的属性和方法，都以$开头来区别，对应Vue.set
例如：
vm.$data
vm.$methods
vm.$watch
这个有利于和data属性对象的数据来区分
多有的指令都以v-xxx形式存在：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Vue2.0 事件的广播与接收(观察者模式)
vue2.0安装style/css loader的方法
iview table高度动态设置方法

局部安装并使用vue-cli（或者其他npm包）

局部安装并使用vue-cli(或者其他npm包)

新建目录：mkdir vue-cli2

切换目录：cd vue-cli2

初始化项目：npm init -y

安装：npm i vue-cli

查看版本：npx vue -V

使用：npx vue init webpack project

补充：

安装vue-cli3.x：npm i @vue/cli@3

使用：npx vue create project

vue-cli全局安装：npm install vue-cli -g

vue-cli的版本查看：vue -V

vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的：

npm install @vue/cli -g

如果原来已经安装了vue-cli的话需要先卸载原来的安装：

npm uninstall vue-cli -g

vue定义全局指令和局部指令

全局指令：

调用vue函数对象的directive方法，里面跟两个参数，一个指令名，一个处理函数

’my-directive’：自定义指令名

function(el, binding)：处理函数， el: 指令所在的标签对象，binding: 包含指令相关数据的容器对象
局部指令：

里面的数据和全局指令相同，只是语法不同

局部指令要定义在vue实例中
全局指令和局部指令的区别：

全局指令可供整个页面使用，而局部指令只作用于他定义的那个vue实例

将文本内容全部转换为大写字母

定义全局指令

创建一个vue实例
通过自定义指令将文本转换为大写渲染到页面中
定义局部指令
同上操作
在非局部指令定义的实例中使用局部指令

在app2的实例中顶了一个局部指令，在app1中使用此指令，可以看到，页面并没有渲染出内容，所以，局部指令对本实例外的区域无效