父组件修改子组件的样式

约定不等于承诺〃 2022-11-17 13:36 242阅读 0赞

父组件：

  1. Father.vue
  2. <template>
  3.    <Child  />
  4. </template>

子组件：

  1. Child.vue
  2. <template>
  3.    <div class='child '>
  4.        <input placeholder='Enter your name'>
  5.    </div>
  6. </template>
  7. <script>
  8. export default {
  10. }
  11. </script>

如果你想在父组件中修改子组件的样式，在父页面有scope的情况下用deep来控制样式

  1. <style scope>
  2. .child /deep/ input{
  3.     background:red;
  4. }
  5. </style>

在父页面没有scope的情况下

  1. <style >
  2. .child  input{
  3.     background:red;
  4. }
  5. </style>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读