关闭

Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法

时间: 2018-11-08阅读: 3329标签: 组件

插槽

插槽,也就是slot,是组件的一块html模板,这块模板显示不现实、以及怎样显示由父组件来决定。 插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。

但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高,更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。


组件传参

通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数

export default {
  props: ['options'],
  data(){
    return {}
  }
}

但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的
如果我只是显示文字的话, 我可以简单的将字符串传进去props: ['message']
但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽


slot 插槽

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 获取插槽作用域

前面讲的只是实现往组件内加入元素, 但是并没有和组件的数据有任何的交互
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>


ref 调用组件内的方法

使用this.$refs找到组件后, 就可以调用其中methods中的方法

<dialog-a ref="dialogA"></dialog-a>
test(){
  this.$refs.dialogA.func()
}



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1289

利用Js自定义事件完成组件间的数据通信

在JavaScript中,原生DOM事件在开发中是很有用的(与用户交互的重要方式),但是操作原生DOM事件其实有两大缺点:性能低、依赖于浏览器(NodeJs、小程序等不可用)。那么这个时候,就需要我们进行自定义事件去处理某些特定的业务

深入理解React中的setState

组件的状态是一种保存、处理和使用给定组件内部信息的方法,并允许你实现其自身的逻辑。状态本身其实是JavaScript中一个简单的对象(Plain Old Java[Script] Object),并且改变它是使组件重新进行渲染的几种方法之一

React组件中的事件处理函数

在react中实现事件处理,有多种写法,那那种写法相对更优,更利于React的渲染性能呢?React组件中添加事件处理的几种方式?constructor函数中bind,使用箭头函数

vue中8种组件通信方式

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式

React 组件通信之发布订阅模式

react的数据流是单向的, react 通信有以下几种方式:父向子通信: 传入props,子向父通信:父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值,父向孙通信:利用context传值。React.createContext()

如何从零开源一个React组件

有没有遇到这样一种情况,你花了很大精力在业务项目中写了一个组件,你觉得这个组件很通用,除了当前的业务场景还应该有其他的应用场景,所以你想开源这个组件,但又不知道从何入手。这篇文章就来聊聊如何开源一个前端组件

vue在自定义组件中使用v-model进行数据绑定

有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。先来一个组件,不用vue-model,正常父子通信;点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。

为什么我们要写 super(props) ?

据说 Hooks 势头正盛,不过我还是想略带调侃地从 class 的有趣之处开始这篇博客。可还行?这些梗对于使用 React 输出产品并不重要

让你的组件千变万化,Vue slot 剖玄析微

Vue 代码中的 slot 是什么,简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。看了上面这句官方解释,可能一样不知道 slot 指的是什么

使用Vue 3.0做JSX(TSX)风格的组件开发

不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方,让我难以接受。所以在很长一段时间,我都在尝试寻找React的替代品,我尝试过不少别的前端框架,但都有各种各样的问题或限制

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!