<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

    <!-- Latest compiled and minified CSS & JS -->

    <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->

    <link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div id="hdcms">

    <form action="" class="form-horizontal">

        <bs-panel :goods="goods">

            <template scope="v" slot="a1">

                <!--font:font-style font-weight font-size font-family-->

                <!--其中，font-size和font-family是必须的。-->

                <span style="font:bold 30px/30px microsoft Yahei;color: green">{{v}}</span>

            </template>

            <template scope="v" slot="a2">

               <li>

                   <span style="color: red;"><h2><strong>{{v.field.title}}</strong></h2></span>

               </li>

            </template>

        </bs-panel>

    </form>

</div>

<script type="text/x-template" id="hd">

    <ul>

        <slot title="cms" hd="js" name="a1" ></slot>

        <slot v-for="v in goods" :field="v" name="a2" ></slot>

    </ul>

</script>

<script>

    var bsPanel = {

        template: "#hd",

        props:['goods'],

    };

    new Vue({

        el: '#hdcms',

        components: {bsPanel},

        data: {

            goods:[

                {title:'iphone7Plus',price:100,num:1},

                {title:'后盾人会员',price:200,num:1},

            ]

        }

    });

</script>

</body>

</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. Echarts学习笔记

    1.Ecahrts使用首先需要引用js文件 Echarts.js 然后定义一个带id的容器(div就可以) 然后就可以初始化echarts了 ↓这是柱形图 <h2 class="con ...

  2. 浅谈MVC基础

    ASP.NET   MVC :UI层框架 让我们的web开发又回到了本质:请求,处理,响应 MVC本身是一种思想,将程序分成三个模块 Model:模型  广义的说法(包含DAL  BLL  MODEL ...

  3. intellijidea课程 intellijidea神器使用技巧 3-2 livetemplate

    创建livetemplate分组: ctrl shift a ==> live templates ==> + ==> templates group 创建livetemplate模 ...

  4. uLua学习之HelloWorld（一）

    前言 好久都没有写过文章了,现在正好在看有关unity3d的热更新方案,在网上找了很久,发现了ulua这个插件,感觉还是不错的,反正自己是个初学者,多了解一些知识应该是没有什么问题的.说起ulua,就 ...

  5. js报错 object is not a function

    主要是js函数名重名了,重命名就可以了.

  6. 腾讯云“动态加速”与“CDN”的区别——浅谈对“动态加速”的理解（可能有误）

    CDN的劣势及“动态加速”产生背景 通常CDN对静态内容支持较好,若使用其加速动态内容,可能会导致异常(如导致无法登录).当然,可以将动态内容的在CDN节点上的缓存时间设置为0秒来解决.但这毕竟是用户 ...

  7. java——二叉树面试题

    import java.util.ArrayList; import java.util.Iterator; import java.util.LinkedList; import java.util ...

  8. 特殊矩阵的压缩存储（转自chunlanse2014）

    对称矩阵 对于一个矩阵结构显然用一个二维数组来表示是非常恰当的,但在有些情况下,比如常见的一些特殊矩阵,如三角矩阵.对称矩阵.带状矩阵.稀疏矩阵等,从节约存储空间的角度考虑,这种存储是不太合适的.下面 ...

  9. httpclient使用head添加cookie

    最近在使用接口时候,我使用get请求时,需要携带登录态,所以在get请求的时候我需要在head里面把cookie给加上,添加方式get和post完全不一样 Post方式添加cookie httpPos ...

  10. 【BZOJ5084】hashit（后缀自动机水过）

    点此看题面 大致题意: 每次在字符串后面加入或删除一个字符,求本质不同的子串个数. 后缀自动机 先说明,此题后缀自动机的确能过. 但我的后缀自动机比较弱,遇上一个较强的\(Hack\)数据就被卡掉了. ...