插槽,也就是slot,是组件的一块html模板,这块模板显示不现实、以及怎样显示由父组件来决定。 插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。
但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高,更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。
通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数
export default {
props: ['options'],
data(){
return {}
}
}
但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的
如果我只是显示文字的话, 我可以简单的将字符串传进去props: ['message']
但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽
slot的使用就像它的名字一样, 在组件内定义一块空间, 取名为slotA
<div class="dialog">
我是对话框
<slot name="slotA"></slot>
</div>
在组件外, 我们可以往插槽里填入任何元素, dialog-a为组件的名称
<dialog-a :options="hello">
<template slot="slotA">
<button>按钮</button>
// ... 可以是任何元素
</template>
</dialog-a>
前面讲的只是实现往组件内加入元素, 但是并没有和组件的数据有任何的交互
slot-scope的作用就是把组件内的数据带出来
<div class="dialog">
我是对话框<br>
{{message}}
<slot name="slotA" :message="message"></slot>
</div>
在组件外就可以得到其中的message
<dialog-a :options="hello">
<template slot="slotA" slot-scope="scope">
<button>{{scope.message}}</button>
</template>
</dialog-a>
使用this.$refs找到组件后, 就可以调用其中methods中的方法
<dialog-a ref="dialogA"></dialog-a>
test(){
this.$refs.dialogA.func()
}
在JavaScript中,原生DOM事件在开发中是很有用的(与用户交互的重要方式),但是操作原生DOM事件其实有两大缺点:性能低、依赖于浏览器(NodeJs、小程序等不可用)。那么这个时候,就需要我们进行自定义事件去处理某些特定的业务
组件的状态是一种保存、处理和使用给定组件内部信息的方法,并允许你实现其自身的逻辑。状态本身其实是JavaScript中一个简单的对象(Plain Old Java[Script] Object),并且改变它是使组件重新进行渲染的几种方法之一
在react中实现事件处理,有多种写法,那那种写法相对更优,更利于React的渲染性能呢?React组件中添加事件处理的几种方式?constructor函数中bind,使用箭头函数
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式
react的数据流是单向的, react 通信有以下几种方式:父向子通信: 传入props,子向父通信:父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值,父向孙通信:利用context传值。React.createContext()
有没有遇到这样一种情况,你花了很大精力在业务项目中写了一个组件,你觉得这个组件很通用,除了当前的业务场景还应该有其他的应用场景,所以你想开源这个组件,但又不知道从何入手。这篇文章就来聊聊如何开源一个前端组件
有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。先来一个组件,不用vue-model,正常父子通信;点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。
据说 Hooks 势头正盛,不过我还是想略带调侃地从 class 的有趣之处开始这篇博客。可还行?这些梗对于使用 React 输出产品并不重要
Vue 代码中的 slot 是什么,简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。看了上面这句官方解释,可能一样不知道 slot 指的是什么
不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方,让我难以接受。所以在很长一段时间,我都在尝试寻找React的替代品,我尝试过不少别的前端框架,但都有各种各样的问题或限制
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!