1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
  6.     <script type="text/javascript" src="../js/vue.js"></script>
  7.     <!-- Latest compiled and minified CSS & JS -->
  8.     <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
  9.     <link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  10. </head>
  11. <body>
  12. <div id="hdcms">
  13.     <form action="" class="form-horizontal">
  14.         <bs-panel :goods="goods">
  15.             <template scope="v" slot="a1">
  16.                 <!--font:font-style font-weight font-size font-family-->
  17.                 <!--其中，font-size和font-family是必须的。-->
  18.                 <span style="font:bold 30px/30px microsoft Yahei;color: green">{{v}}</span>
  19.             </template>
  20.             <template scope="v" slot="a2">
  21.                <li>
  22.                    <span style="color: red;"><h2><strong>{{v.field.title}}</strong></h2></span>
  23.                </li>
  24.             </template>
  25.         </bs-panel>
  26.     </form>
  27. </div>
  29. <script type="text/x-template" id="hd">
  30.     <ul>
  31.         <slot title="cms" hd="js" name="a1" ></slot>
  32.         <slot v-for="v in goods" :field="v" name="a2" ></slot>
  33.     </ul>
  34. </script>
  35. <script>
  36.     var bsPanel = {
  37.         template: "#hd",
  38.         props:['goods'],
  39.     };
  41.     new Vue({
  42.         el: '#hdcms',
  43.         components: {bsPanel},
  44.         data: {
  45.             goods:[
  46.                 {title:'iphone7Plus',price:100,num:1},
  47.                 {title:'后盾人会员',price:200,num:1},
  48.             ]
  49.         }
  50.     });
  51. </script>
  52. </body>
  53. </html>

效果:

45.VUE学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解的更多相关文章

  1. 045——VUE中组件之父组件使用scope定义子组件模板结构

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  3. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  4. 21.VUE学习之-操作data里的数组变异方法push&unshit&pop&shift的实例应用讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue子组件向父组件传值

    vue2.0中通过$emit事件在子组件中自定义事件,通过操作子组件中的事件,向父组件传递参数: 首先写一个叫做parentComp.vue的父组件: <template> <div ...

  6. Vue 中的 子组件 给 父组件 传值

    子组件的某一个事件(sendData)内部,通过this.$emit('事件名', 传递的值)传递数据父组件在调用子组件的地方,绑定了子组件自定义的 事件名(change-data) 定义父组件的地方 ...

  7. Vue学习笔记【23】——Vue组件（组件的定义）

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...

  8. vue----(组件)子组件和父组件

    1.组件的定义 1.定义组件并引用 2.父组件向子组件传值 3.子组件向父组件传值 什么是组件 1.Html中有组件,是一段可以被复用的结构代码 2.Css中有组件,是一段可以被复用的样式 3.Js中 ...

  9. vue学习笔记3

    Vue.js - Day3 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即 ...

随机推荐

  1. SASS简介及使用方法

    一.什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量.条件语句等,使开发更简单可维护.这里是官方文档. 二. ...

  2. Python开发环境Wing IDE如何使用GTK和PyGObject

    Wing IDE是一个集成开发环境,可用于编辑.测试和调试使用PyGObject为GTK编写的Python代码.Wing IDE提供自动完成.调用提示.一个强大的调试器,以及许多其他功能,可帮助用户编 ...

  3. matlab练习程序（粒子群优化PSO）

    算法没有和图像处理直接相关,不过对于图像分类中的模式识别相关算法,也许会用到这个优化算法. 算法步骤: 1.首先确定粒子个数与迭代次数. 2.对每个粒子随机初始化位置与速度. 3.采用如下公式更新每个 ...

  4. mysql启动报错，与selinux相关

    mysql启动报错,与selinux相关 如果遇到报错,可能的情况是 selinux 的关系,可以安装 setroubleshoot-server 工具,使用 sealert -a /var/log/ ...

  5. [Maven]Eclipse集成遇到的问题

    当maven项目导入到eclipse中后使用eclipse提供的maven命令执行任意一个出现 Exception in thread "main" java.lang.Unsup ...

  6. 08、Spark常用RDD变换

    08.Spark常用RDD变换 8.1 概述 Spark RDD内部提供了很多变换操作,可以使用对数据的各种处理.同时,针对KV类型的操作,对应的方法封装在PairRDDFunctions trait ...

  7. nginx配置vhost配置文件详解

    //千锋PHP-PHP培训的实力派server { listen 80; server_name www.sina.com; root /data/www/sina; index index.php; ...

  8. April 21 2017 Week 16 Friday

    Courage is like a muscle. We strengthen it with use. 勇气就像肌肉,越使用越强大. Most often it is true, but somet ...

  9. Jmeter入门6 参数化—CSV Data Set Config 通过文件导入数据

    线程组循环次数大于1的时候,请求里每次提交的数据都相同.有的系统限制了不能提交相同数据,我们通过 CSV Data Set Config 加载csv文件数据. 1 创建一个文本文件,输入参数值保存为. ...

  10. LCT入门

    前言 \(LCT\),真的是一个无比神奇的数据结构. 它可以动态维护链信息.连通性.边权.子树信息等各种神奇的东西. 而且,它其实并不难理解. 就算理解不了,它简短的代码也很好背. \(LCT\)与实 ...