vue修改子组件内部样式的同时不影响原组件样式在父组件中的使用的几种方法

方法一.使用props传入一个变量存储class值并在子组件里调用

父组件：

 子组件：

props里传入值

调用： 

 方法二：提前在子组件里下写好新样式，条件满足时改变样式

原本样式为 LocalClick

当isLock属性改变为true时添加新样式，此时调用的样式为 LocalClick+activeLocalClass

子组件里设置变量值

在子组件里写修改后的样式

方法三：来自于vue官方教程

注意：
1.template中的内容必须被一个元素包含。 这个元素被称为根节点（根元素）
2.每个组件有且只能有一个根元素。

但当子组件内调用多个不同的class时，该方法只能修改根元素的class

 如果需要修改其他class则无法实现。

方法三修改：

如果需要修改子组件内部指定class，可以用深度监听器/deep/修改：

在父组件的style样式里用该class名称 /deep/ 子组件内待修改的class名称的格式

 子组件内调用的class：inputs

在父组件中写样式 input-s

 

然后调用 class="input-s" 此时父组件的样式input-s会代替子组件样式inputs