hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 前端开发 - 正文 君子好学,自强不息!

Vue.js中运用插槽将数据从父组件通报到子组件_WEB前端开发

2020-09-19前端开发搜奇网52°c
A+ A-
这篇文章给人人引见一下怎样运用Vue插槽在Vue.js中将数据从父组件通报到子组件。有肯定的参考价值,有须要的朋侪能够参考一下,愿望对人人有所协助。

这篇文章合适一切阶段的开发人员(包含初学者)。

在你入手下手之前

您的盘算机大将须要以下内容:

  • 已装置Node.js版本10.x及更高版本。 您能够经由过程在终端/敕令提示符中运转以下敕令来考证版本:node -v

  • 代码编辑器; 引荐Visual Studio Code

  • Vue的最新版本,已全局装置在您的盘算机上

  • 您的盘算机上已装置Vue CLI 3.0。 为此,请先卸载旧的CLI版本:

npm uninstall -g vue-cli

然后,装置新的:

npm install -g @ vue / cli
  • 在此处下载Vue入门项目

  • 解压下载的项目

  • 导航到解压缩的文件并运转敕令以使一切依靠项坚持最新:

npm install

什么是Vue插槽?

Vue插槽是Vue团队建立的Vue模板元素,旨在为模板内容分发供应平台。 它是受Web组件范例草案启示的内容分发API的完成。 运用Vue插槽,您能够在项目中的各个组件之间通报或分发HTML代码。

为何Vue插槽很主要?

内容散布很主要,缘由有许多,个中一些与组织有关。运用vue插槽,能够组织一个html接口(类似于typescript),然后能够将其用作经由过程模板注入构建组件的指南。它是一个非常可伸缩和高效的解决方案,能够将模板代码从一个组件通报到另一个组件。

内容定位是Vue插槽的另一个很好的用例。您只需建立一个模板,然后运用另一个组件或父组件依据您愿望模板显如今用户界面中的体式格局分列该模板。

插槽与道具

假如您相识Vue插槽,您可能会想知道道具和插槽是不是做一样的事变。 好了,这些东西或平台的中心思想是勉励资本的可重用性和效力。 考虑到这一点,插槽和道具是类似的。

props处置惩罚在组件之间通报数据对象,而slot处置惩罚在组件之间通报模板(html)内容。然则,作用域插槽的行动与道具完整一样;这将在本教程中清楚地申明。

Vue插槽语法

关于插槽,您的子组件充任您愿望怎样部署内容的接口或组织。多是如许的:

<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件(要注入子组件的HTML内容地点的处所)能够以下所示:

<Test>
   <h2>Hello World!</h2>
 </Test>

此组合将返回以下所示的用户界面:

<template>
  <div>
    <h2>Hello World!</h2>
  </div>
</template>

请注重,它本身的插槽是怎样作为内容注入位置和体式格局的指南的——这是中心思想。

演示

假如您从一入手下手就关注这篇文章,那末您将在vs代码中翻开vue starter项目。为了演示语法部份中的简朴示例,我们的父组件将是app.vue文件。翻开app.vue文件并在此代码块中复制:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test>
      <h2>Hello World!</h2>
    </Test>
  </div>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  }
}
</script>

子组件将成为测试组件,因而请在test.vue文件中复制下面的代码块:

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'Test'
}
</script>

运用以下敕令在开发环境中运转应用程序:

npm run serve

定名插槽

Vue许可一个组件有多个插槽,这意味着您能够具有恣意数目的插槽。要测试此功用,请将此新代码块复制到test.vue文件中:

<template>
  <div>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'Test'
}
</script>

假如运转应用程序,能够看到hello world被打印了三次。因而,假如您想增加更多的内容(比方,一个标题、一个带有文本的段落,然后是一个无序的列表),vue许可我们定名作用域,以便它能够标识要显现的特定作用域。在test.vue文件中定名插槽以下:

<template>
  <div>
    <slot name="header"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: 'Test'
}
</script>

如今,还必须依据要在个中显现HTML元素的槽名来标记这些HTML元素。将此复制到app.vue文件的模板部份:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test>
      <h2 slot="header">Hello world!</h2>
      <p slot="paragraph">Hello, I am a paragraph text</p>
      <ul slot="links">
        <li>Hello, I am a list item</li>
        <li>Hello, I am a list item</li>
      </ul>
    </Test>
  </div>
</template>

v-castle语法

当VUE版本2.6宣布时,它附带了一个更好的语法来援用名为v-slot的子组件中的插槽称号,这意味着要替代初始的插槽语法。因而,与其运用如许的槽来替代父组件模板:

<Test>
   <h1 slot="header">Hello world!</h1>
</Test>

从3.0版入手下手,它如今将以下所示:

<Test v-slot:header>
   <h1>Hello world!</h1>
</Test>

注重,除了字符串从slotv-slot的纤细变化外,另有一个严重变化:v-slot只能在模板上定义,而不能在任何html元素上定义。这是一个很大的变化,由于它质疑定名插槽的可用性,但停止本文撰写之时,插槽仍然是文档的很大一部份。

作用域插槽

想象一个场景,个中Vue插槽还能够从父组件接见子组件中的数据对象,这是一种具有道具功用的插槽。要申明这一点,请继承,经由过程将下面的代码块复制到test.vue文件中,在子组件中建立一个数据对象:

<template>
  <div>
    <slot v-bind:team="team"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data(){
    return{
      team:"FC Barcelona"
    }
  }
}
</script>

与一般props一样,v-bind指令用于将数据中的团队与父组件中的prop援用绑定。翻开app.vue文件并将下面的代码块复制到模板部份:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test v-slot="{team}">
      <h2>Hello world! my team is {{team}}</h2>
    </Test>
  </div>
</template>

假如运转应用程序,您将看到数据对象已胜利通报到父组件。

结论

本文向您引见了vue.js中的插槽,以及它们对内容注入的主要性。您看到了怎样设置它,以至看到了怎样为一个组件设置多个插槽。你还看到了狭槽怎样经由过程作用域来充任道具。

英文原文地点:https://blog.logrocket.com/how-to-pass-html-content-through-components-with-vue-slots/

相干引荐:

2020年前端vue面试题大汇总(附答案)

vue教程引荐:2020最新的5个vue.js视频教程精选

更多编程相干学问,请接见:编程入门!!

以上就是Vue.js中运用插槽将数据从父组件通报到子组件的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
Vue.js中运用插槽将数据从父组件通报到子组件_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/300801.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。