vue 内置组件__slot讲解

slot 是vue的内置组件,主要分为传值和接收值两部分;

首先写一个自定义组件:例如 <js></js>

再写一个template模板

并在构造器中使用components:{} 挂载,

在构造器的data中写一个选项方法:

data: {

  jsData: {

    url: ‘http://www.baidu.com‘,

    netName: ‘百度‘,

    skill: ‘seach‘

  }

},

主要是传值与接收值部分;

在自定义组件中传值,通过(key,value)的方式

<js>

  <span slot="url">{{ jsData.url }}</span>

  <span slot="netName">{{ jsData.netName }}</span>

  <span slot="skill">{{ jsData.skill }}</span>

</js>

然后在template模板中接收传入的值:

<template id="tep">

  <div>

    <p>百度地址:<slot name="url"></slot></p>

    <p>名称:<slot name="netName"></slot></p>

    <p>作用:<slot name="skill"></slot></p>

   </div>

</template>

将其挂载到 js 组件中

var js = {

  template: ‘#tep‘

}

完整代码示例如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>slot</title>

<script src="../assets/js/vue.js"></script>

</head>

<body>

<h1>slot</h1>

<hr>

<div id="app">

<js>

<span slot="url">{{ jsData.url }}</span>

<span slot="netName">{{ jsData.netName }}</span>

<span slot="skill">{{ jsData.skill }}</span>

</js>

</div>

<template id="tep">

<div>

<p>百度地址:<slot name="url"></slot></p>

<p>名称:<slot name="netName"></slot></p>

<p>作用:<slot name="skill"></slot></p>

</div>

</template>

<script>

var js = {

template: ‘#tep‘

}

var app = new Vue({

el: ‘#app‘,

data: {

jsData: {

url: ‘http://www.baidu.com‘,

netName: ‘百度‘,

skill: ‘seach‘

}

},

components: {

‘js‘: js

}

})

</script>

</body>

</html>

原文地址:https://www.cnblogs.com/sunyang-001/p/11106152.html

时间: 2024-10-10 07:02:57

vue 内置组件__slot讲解的相关文章

通俗易懂了解Vue内置组件keep-alive内部原理

1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件,官网如下介绍: <keep-alive>是Vue中内置的一个抽象组件,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中.当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. 这句话的意思简单来说:就是我们可以把一些不常变动的组件或者需要缓存的组件用<keep-alive&g

Vue基础(环境配置、内部指令、全局API、选项、内置组件)

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信

vue2.0学习(四)-实例和内置组件

vue2.0学习(四)-实例和内置组件 1.实例入门-实例属性 一.Vue和Jquery.js一起使用 下载可以去官网进行下载,我这里使用的版本是3.1.1,下载好后在需要的页面引入就可以了.当然你还有很多其它的方法引入jquery,只要可以顺利引入就可以了. <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> <!DOCTYPE

vue内置的标签(组件)

component:用于动态组件,查看博文vue学习之组件. <component :is="componentId"></component> transition:过渡和动画,查看官网文档进入/离开&列表过渡. <!-- 简单元素 --> <transition> <div v-if="ok">toggled content</div> </transition> tra

vue内置指令与自定义指令

一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例如:v-on:click  v-on:keyup 3.v-model:数据双向绑定:用于表单输入等:例如:<input v-model="message"> 4.v-show:条件渲染指令,为DOM设置css的style属性 5.v-if:条件渲染指令,动态在DOM内添加或删除

vue内置指令详解——小白速会

指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  等等 主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="ur

Vue.js 实例和内置组件 入门

首先来看看实例的概述: 实例就是在构造器外部操作操作构造器内部的属性和方法. 实例的作用就是给Vue提供与其它js及其框架结合使用的接口. 进入实例阶段: 首先来看 Vue.js 搭配 jQuery 使用: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Early Examples Demo</title&g

Vue内置的Component标签用于动态切换组件

html <div id="app"> <component :is="cut"></component> <button @click="current">点击切换</button> </div> js var classA = { template:`<div>状态1</div>` }; var classB = { template:`<d

Bootstrap学习-其它内置组件

1.缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息.Bootstrap框架将这一部独立成一个模块组件.并通过"thumbnail"样式配合bootstrap的网格系统来实现.可以将产品列表页变得更好看. 使用方法: 通过"thumbnail"样式配合bootstrap的网格系统来实现. .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px