之前看了一篇关于vue开发技巧的文章,其中提到了在写高级组件时,通过v-bind="$props"将props一次性向下传递。这种向下传递的方式我之前没有用过,便看了下官网的介绍,并补充了一些相关api用法,在这里记录一下,方便自己以后查看。先进行相关的属性介绍,代码在后面。
v-bind="$props": 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。
vm.$props: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
官网介绍: https://cn.vuejs.org/v2/api/#vm-props
v-bind="$attrs": 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。
vm.$attrs :包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
v-on="$listeners": 将父组件标签上的自定义事件向下传递,其子组件可以直接通过this.$emit(eventName)的方式调用。
vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
index.vue页面
<template>
<div>
<h1>props、属性、事件传递</h1>
<app-parent test="123" :name="name" :age="age" v-on:start1="say1" @start2="say2"></app-parent>
</div>
</template>
<script>
import AppParent from './parent.vue';
export default {
data() {
return {
name: '传给父组件的值',
age: '18'
};
},
components: {
AppParent
},
methods: {
say1() {
console.log('第一个。。。。。');
},
say2() {
console.log('第二个。。。。。');
}
}
}
</script>
parent.vue组件
<template>
<div>
<h3>父组件</h3>
<div>组件名上绑定的非props特性($attrs): {{$attrs}}</div>
<app-child v-on="$listeners" v-bind="$props"></app-child>
</div>
</template>
<script>
import AppChild from './child.vue';
export default {
data() {
return {
};
},
inheritAttrs: false,
props: ['name', 'age'],
components: {
AppChild
},
mounted() {
this.$emit('start1');
}
}
</script>
child.vue组件
<template>
<div>
<h3>子组件</h3>
<div>父组件传递过来的名称: {{name}}</div>
<div>父组件传递过来的年龄: {{age}}</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
props: ['name', 'age'],
components: {},
created() {
},
mounted() {
this.$emit('start2');
},
}
</script>
和之前的文章一样,本文也要求你对render props有一些知识背景,如果没有官方文档可能会对你有很大的帮助。本文将会使用函数作为children的render props模式以及结合React的context API来作为例子。
render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码(个人理解:将组件进行函数化,通过调用组件名实现,组件的利用,以元素的形式调用,并渲染画面),具有 render prop 的组件接受一个函数
写业务时,我们经常需要抽象一些使用频率较高的逻辑,但是除了高阶组件可以抽象逻辑,RenderProps也是一种比较好的方法。RenderProps,顾名思义就是将组件的props渲染出来。实际上是让组件的props接收函数,由函数来渲染内容。将通用的逻辑
我们测试了通过一些 props 的结果。但是实际上,我们可以直接测试 props。让我们回到上次的 ToDoList组件,不过这次要用一个新的 Task 组件。我们将要测试 ToDoList 组件是否渲染 Task 组件,并将任务名称传递给他们。
传入的值想作为局部变量来使用,直接使用会 报错。错误是说的避免直接修改父组件传入的值,因为会改变父组件的值,解决方案:可以在data中重新定义一个变量,改变指向,但是也只是针对简单数据类型
Vue提供了两种不同的存储变量:props和data。这些方法一开始可能会让人感到困惑,因为它们做的事情很相似,而且也不清楚什何时使用props,何时使用data。那么props和data有什么区别呢?
React 的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在 props 和 state 中。实际上在任何应用中,数据都是必不可少的,我们需要直接的改变页面上一块的区域来使得视图的刷新
vue 要求任何传递给组件的数据,都要声明为 props。此外,它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的契约一样,确保组件按预期使用。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!