首页 > 其他分享 >【标签属性补充】scoped/ref/props

【标签属性补充】scoped/ref/props

时间：2023-08-06 22:45:26浏览次数：29  
标签：msg scoped props 组件 ChildComponent ref 属性

【一】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>

标签：msg,scoped,props,组件,ChildComponent,ref,属性
From： https://www.cnblogs.com/dream-ze/p/17610261.html

相关文章

  • [Vue warn]: Property or method "todoName" is not defined on the instance but ref
    错误原因先上报错截图报错翻译：解决办法首先需要保证初始化属性时该属性是被动的，两种情况是在数据选项中，是一些基于类的组件。在vue的template中使用了该属性，但是在data或者methods中还并没有被定义，就被使用了，造成了这个错误。在data中定义一下这个数据或者在met......
  • Prefixes and Suffixes 题解
    题目传送门一道字符串题。我们考虑还原字符串后再一个一个的判断。很显然，这个字符串是由一个长度为\(n-1\)的前缀和后缀组成的。因此我们可以找到这\(2\)个长度为\(n\)的字符串，然后枚举哪个是前缀，哪个是后缀。值得注意的是，当你判断一个字符串为前缀时，如果后面出现了同样......
  • 【JointJS】ref 属性和 calc 相对计算函数
    在define函数和calc相对计算函数中提到了calc相对计算函数，默认情况下，不指定ref属性，calc以这个g标签作为基点计算值。而一个图形下面（也就是一个g标签），会有很多其他子图形，例如，<ellipse>、<text>、<rect>等。如上图所示，这是一个由define函数自定义的图形，其包含了......
  • BGP选路-本地优先级local-preference
    本地优先级特性1）共有属性，默认值为1002）只能工作于IBGP邻居之间传递3）从EBGP邻居学到的BGP路由本地优先级属性默认不显示，但是默认值为100，从自身IBGP邻居学习到的是可以显示的，默认值为1004）数值越大越优先核心配置：1）抓取感应兴趣流ipip-prefix1index10permit100.1.1.024greater-e......
  • Undefined symbol HAL_SRAM_Init (referred from lcd.o) 报错无法使用HAL_SRAM_Init
    前言最近在使用HAL库配置FSMC的时候，发现在使用CubeMX生成的fsmc的配置文件，编译不会报错：UndefinedsymbolHAL_SRAM_Init(referredfromlcd.o)而自己移除CubeMX生成的配置文件，一步步自己配置，就会出现上诉报错，并且将stm32f4xx_hal_sram.h文件包括进去后，仍然报错，奇怪的是MDK编......
  • Unity 编辑器预制体工具类PrefabUtility 常用函数和用法
    Unity编辑器预制体工具类PrefabUtility常用函数和用法简介在Unity中，预制体（Prefab）是一种非常有用的工具，它允许我们创建可重复使用的对象和场景元素。Unity提供了许多内置的工具和函数来处理预制体，其中一个重要的类就是PrefabUtility。PrefabUtility类提供了一系列函数，用于创建、......
  • Woreflint恶意软件c2分析
    WhatisTrojan:Win32/Woreflint.A!clinfection?InthisshortarticleyouwillcertainlydiscoverconcerningthedefinitionofTrojan:Win32/Woreflint.A!clandalsoitsnegativeeffectonyourcomputersystem.Suchransomwareareaformofmalwarethatiscl......
  • SpringBoot 单元测试不执行：maven-surefire-plugin 版本问题
    SpringBoot单元测试不执行：maven-surefire-plugin版本问题 问题现象SpringBoot项目，在编写单元测试时，使用了JUnit4.13.2以上的版本。为了让Maven能自动运行单元测试，需要引入MavenSurefire或MavenFailsafe插件。项目中使用的maven-surefire-plugin版本号为......
  • wsgiref
    #服务wsgi协议的web服务器，django的web服务用的就是它#相当于个socket服务端，可以接收客户端发送过来的请求，处理，返回给客户端fromwsgiref.simple_serverimportmake_serverdefmya(environ,start_response):print(environ)start_response('200OK',[('Conten......
  • ip-prefix的配置举例
    前缀列表语句为：ipip-prefixLIST1index10permit10.0.0.08less-equal32详解：10.0.0.08：表示前8为必须完全相同没有greater-equal，表示继承前面的8less-equal32表示：8≤掩码≤32结果为：10.1.0.0/1610.1.1.0/2410.1.1.0/2610.1.1.1/3210.2.2.0/24全部通过......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99