【一】scoped

• 新建的组件
  • 加了scoped，表示样式只在当前组件生效
  • 如果不加，子组件都会使用这个样式

<style scoped>
</style>

• scoped 是 Vue.js 中的一个样式作用域限定符，用于将样式限制在当前组件中生效，并不会影响子组件或父组件。
  • 使用 scoped 后，样式只会应用于当前组件的模板部分，不会影响其他组件。
• 例如，在一个 Vue 组件中，我们可以这样定义样式：

<template>
  <div class="app">
    <h1>{{ message }}</h1>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'AppComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    };
  }
}
</script>

<style scoped>
.app {
  background-color: #f0f0f0;
  padding: 20px;
}
h1 {
  color: blue;
}
</style>

• 在上述代码中，我们给 <style> 标签添加了 scoped 属性。

  • 这意味着 .app 类和 h1 元素的样式仅适用于当前组件（AppComponent），不会影响其他组件或全局样式。
  • 如果在这个组件的模板中使用了 <child-component></child-component>，子组件的样式将不受到父组件的样式影响。

• 下面是子组件（ChildComponent）的示例代码：

<template>
  <div class="child">
    <h2>Child component</h2>
    <p>This is a child component.</p>
  </div>
</template>

<style scoped>
.child {
  background-color: yellow;
  padding: 10px;
}
h2 {
  color: red;
}
</style>

• 在子组件中，我们同样使用了 scoped 属性来限定样式作用域。
  • 这样，子组件的样式也仅在子组件中生效，不会受到父组件或其他组件样式的干扰。
• 总结来说
  • 使用 <style scoped> 可以让样式仅在当前组件中生效，避免样式冲突和作用域泄漏的问题。
  • 每个组件都有自己的作用域，可以独立定义和管理样式，提高代码的可维护性。

【二】ref属性

• 放在普通标签上，通过 this.$refs.名字---》取到的是dom对象，可以直接操作dom

• 放在组件上，通过该this.$refs.名字---》取到的是组件对象，这样在父组件中，就拿到了子组件对象，对象属性和方法直接用即可

• ref 属性是 Vue.js 中用于获取对 DOM 元素或组件实例的引用的属性。通过在普通标签上或组件上添加 ref 属性，我们可以在 JavaScript 代码中使用 this.$refs.xxx 来访问对应的 DOM 元素或组件实例。

【1】在普通标签上使用 ref：

• 当 ref 属性放置在普通标签上时，this.$refs.xxx 将返回一个指向该 DOM 元素的引用。

  • 我们可以通过操作该 DOM 元素进行各种 DOM 操作。

• 例如

  • 在下面的示例中，我们在一个 input 标签上添加了 ref 属性，并通过按钮点击事件获取该 input 标签的值并进行处理：

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="handleClick">获取输入值</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      const input = this.$refs.myInput;
      const value = input.value;
      // 处理获取到的输入值
      console.log(value);
    }
  }
}
</script>

• 在上面的代码中，我们在 input 标签上添加了 ref="myInput" 属性
  • 然后在 handleClick 方法中通过 this.$refs.myInput 获取到该 input 元素的引用。
  • 接着，我们可以使用该引用来获取输入框的值并进行进一步的处理。

【2】在组件上使用 ref：

• 当 ref 属性放置在组件上时，this.$refs.xxx 将返回一个对该组件实例的引用。
  • 这样在父组件中，我们可以通过 this.$refs.xxx 来访问子组件的属性和方法，实现父子组件之间的通信。
• 例如
  • 在下面的示例中，我们有一个父组件和一个子组件，通过在子组件上添加 ref 属性并在父组件中访问该引用，实现了父组件获取到子组件实例的功能：

<template>
  <div>
    <child-component ref="myChild"></child-component>
    <button @click="handleChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildMethod() {
      const child = this.$refs.myChild;
      child.childMethod(); // 调用子组件的方法
    }
  }
}
</script>

• 在上面的代码中，我们在子组件的标签上添加了 ref="myChild" 属性
  • 然后在父组件中通过 this.$refs.myChild 获取到该子组件的实例，并进行进一步的操作，例如调用子组件的方法。
• 总结来说
  • ref 属性可以用于获取对 DOM 元素或组件实例的引用，从而实现对其的操作和通信。
  • 在普通标签上使用 ref 属性可以获得对应的 DOM 元素的引用，而在组件上使用 ref 属性则可以获得对应的组件实例的引用，方便进行组件之间的交互和通信。

【三】props其它

• 父传子之自定义属性

• 基本使用

  • props: ['msg']

• 限制类型

  • props: {'msg': Boolean}

• 限制类型，必填，默认值

  props: {
      msg: {
          type: String, //类型
              required: true, //必要性
                  default: '老王' //默认值
      }
  }
  

• props 是 Vue.js 中用于父组件向子组件传递数据的方式之一。

• props 允许父组件向子组件传递数据，并在子组件中以属性的形式接收这些数据。

【1】父传子之自定义属性：

• 通过 props，父组件可以向子组件传递自定义属性，子组件可以通过在 props 中声明该属性来接收传递的值。
• 例如，在下面的示例中，我们有一个父组件和一个子组件，通过在子组件上添加 props 声明接收属性，实现了父组件向子组件传递自定义属性的功能：

<template>
  <div>
    <child-component :customMsg="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent!'
    };
  }
}
</script>

• 在上面的代码中，我们将父组件的 message 属性赋值为 'Hello from parent!'。
  • 然后，将这个属性通过 v-bind 绑定到子组件的 customMsg 属性上，子组件就可以接收到父组件传递过来的自定义属性。

【2】基本使用：

• 在子组件中基本使用 props 的方式是将要传递的属性名作为数组传递给 props。子组件将能够接收到父组件传递过来的对应值。
• 例如，在下面的示例中，我们有一个父组件和一个子组件，父组件向子组件传递了一个名为 msg 的属性：

<template>
  <div>
    <child-component :msg="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent!'
    };
  }
}
</script>

• 在子组件中，我们可以通过在 props 中添加 'msg' 来声明接收属性，然后在子组件中使用该属性。

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: ['msg']
}
</script>

• 上述子组件会渲染出从父组件传递过来的 message 属性的值。

【3】限制类型：

• 在使用 props 时
  • 可以通过设置 type 选项来限制传递属性的类型。
  • 这样可以确保接收到的值是符合预期的类型。
• 例如，在下面的示例中，我们限制了传递的 msg 属性只能是 Boolean 类型：

<template>
  <div>
    <child-component :msg="true"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

• 在子组件中，我们可以通过设置 props 中的值为指定的类型来限制传递属性的类型：

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: Boolean
  }
}
</script>

• 上述子组件只接受布尔类型的 msg 属性
  • 如果父组件传递了其他类型的属性值，Vue.js 会发出一个警告。

【4】限制类型、必填和默认值：

• 除了限制类型外
  • 还可以通过 required 选项来指定一个属性是否为必填项，并使用 default 选项来指定属性的默认值。
• 例如
  • 在下面的示例中
  • 我们限制了传递的 msg 属性只能是字符串类型，必须填写，并且默认值为 '老王'：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

• 在子组件中
  • 我们可以通过设置 props 中的值为一个对象来限制属性的类型、必填和默认值：

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      required: true,
      default: '老王'
    }
  }
}
</script>

• 上述示例中的子组件会默认渲染出 '老王'，因为没有父组件给它传递 msg 属性。
  • 如果父组件传递了 msg 属性，则子组件将渲染出传递的值。
  • 如果没有传递 msg 属性，并且设置了 required: true，Vue.js 会发出一个警告。
• 总结来说
  • props 是用于父组件向子组件传递数据的方式之一。
  • 通过在子组件中声明 props，可以限制传递属性的类型，并指定某些属性为必填项，并为属性设置默认值。
  • 这样可以有效地控制父子组件之间的数据传递和交互。

【四】混入mixin

• 包下的 index.js 有特殊函数

  • 之前导入
    • import xx from './mixin/index.js'
  • 简化导入路径
    • import xx from './mixin'

• mixin(混入)

  • 混入可以将多个组件共用的配置提取成一个混入对象，从而实现代码复用和逻辑分离的目的。
  • 混入对象一般会包含组件的数据、方法等。

• 使用步骤

  • 定义混入对象

  • 在 mixin/index.js 文件中，定义了一个名为 child 的混入对象，包含了 data 和 methods。

  export const child = {
      data() {
          return {
              name: 'child',
          }
      },
      methods: {
          clickFunc() {
              alert(this.name)
          }
      }
  }
  

  • 使用混入：

    • 通过局部使用混入，即在组件中使用混入对象 child 的配置。

    // 导入混入对象
    import {child} from "@/mixin";
    
    export default {
      name: 'HomeViews',
      data() {
        return {}
      },
      methods: {},
      // 注册混入对象
      mixins: [child,]
    }
    

  • 全局使用混入：

    • 每个组件都有效main.js中

    // 全局注册混入
    // 导入混入
    import {child} from "@/mixin";
    // 注册混入
    Vue.mixin()
    

• 局部优先

<template>
  <div class="home">

    <h1>这是 HomeView 首页</h1>

    <button @click="clickFunc">点我弹名字</button>
  </div>
</template>
<div class="home">

</div>
<script>
// 导入混入对象
import {child} from "@/mixin";

export default {
  name: 'HomeView',
  data() {
    return {
      name:'HomeView',
    }
  },
  methods: {},
  // 注册混入对象
  mixins: [child,]
}
</script>

本栏目推荐文章
• Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型（Types）、方法（Methods）和事件（Events）的属性和参数解析
• C# 方法中的 引用参数 ref out 的使用
• pom.xml一些标签
• 002*：React状态、属性、传值
• mybatis的foreach标签初使用
• 中文语言标签
• Spring属性注入的5种方式
• 为什么在 Vue 对象上新增一个属性会丢失响应式？
• HTML DOM对象-方法和属性
• k8s集群Node节点管理：节点信息查看及节点label标签管理

属性 标签 scoped props ref属性 标签scoped props 属性props 属性props vue props组件vue-props属性 属性vue ref 属性 对象props list 脚手架 属性vue ref scope标签lt gt 插件 属性 案例scoped 属性ref