props

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

posted @ 2023-08-06 22:31 Chimengmeng 阅读(7) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

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

【一】scoped

【二】ref属性

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

【2】在组件上使用 ref：

【三】props其它

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

【2】基本使用：

【3】限制类型：

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

【四】混入mixin

公告