vue & child component & props

vue pass data to child component

vue components

how to write an vue component

vue register component single file

https://vuejs.org/v2/guide/components-registration.html

https://vuejs.org/v2/guide/components.html

https://vuejs.org/v2/guide/single-file-components.html

https://stackoverflow.com/questions/44568323/vue-js-loading-single-file-components

https://stackoverflow.com/questions/43622907/how-do-i-register-a-vue-component

TODO list

pass event to CropCard Components
export components, publish to npm

???

vue card components demo



<template>

    <div class="crop-card-container">

        <div

            v-if="isShowHotFire"

            class="crop-card-fire">

            <span class="crop-card-text"></span>

        </div>

        <div class="crop-card-logo">

            <img

                :src="logo"

                alt=""

                class="crop-card-logo-img"

            />

        </div>

        <div class="crop-card-right">

            <span class="crop-card-right-title">

                <span class="crop-card-right-title-key">

                    {{cropName}}

                </span>

                <span class="crop-card-right-title-value">

                    {{cropNameOther}}

                </span>

                <!-- <span class="crop-card-right-title-key">钉钉</span>

                <span class="crop-card-right-title-value">(中国) 信息技术有限公司</span> -->

            </span>

            <p class="crop-card-right-content">

                <span class="crop-card-right-content-key">法定代表人</span>

                <span class="crop-card-right-content-key">注册资本</span>

            </p>

            <p class="crop-card-right-content">

                <span class="crop-card-right-content-value">

                    {{cropOwner}}

                </span>

                <span class="crop-card-right-content-value">

                    {{cropMoney}}

                </span>

                <!-- <span class="crop-card-right-content-value">马云</span>

                <span class="crop-card-right-content-value">330886万美元</span> -->

            </p>

        </div>

        <div class="crop-card-line"></div>

        <div class="crop-card-footer">

            <span class="crop-card-footer-key">品牌</span>

            <span class="crop-card-footer-value">

                {{cropName}}

            </span>

            <!-- <span class="crop-card-footer-value">钉钉</span> -->

        </div>

    </div>

</template>

<script>

    // "use strict";

    /**

     *

     * @author xgqfrms

     * @license MIT

     * @copyright xgqfrms

     *

     * @description 模块-CropCard

     * @augments

     * @example

     * @link

     * @created 2019-05-22

     *

     */

    // import Light from "light";

    import defaultImage from "../../images/search-history/dd-logo.png";

    export default {

        props: [

            "cropName",

            "cropNameOther",

            "cropOwner",

            "cropMoney",

        ],

        name: "CropCard",

        data() {

            return {

                value: "",

                logo: defaultImage,

                isShowHotFire: true,

            };

        },

        methods: {

            AutoSkipToSearchPage() {

                let url = window.location.origin;

                let hash = `search`;

                Light.navigate(

                    `${url}/#/${hash}`,

                    {

                        // message: "",

                    },

                    {

                        title: "",// 公司 / 资讯 / 链谱 / 人物 / 数据

                        replace: false,

                    },

                );

            },

        },

        mounted() {

            // props ???

            console.log(`mounted `, this.props);

            // undefined

        },

        created() {

            console.log(`created `, this.props);

            // undefined

            console.log(this.cropName);

            console.log(this.cropOwner);

            console.log(this.cropMoney);

            // OK

        },

    };

/*

    import * as CropCard from "./components/corp-card";

    export default {

        name: "search",

        components:{

            CropCard,

        },

    },

*/

</script>

<style lang="css">

html{

    --color: #f0f;

    font-family:PingFangSC-Regular;

    font-weight:400;

}

.crop-card-container{

    position: relative;

    display: flex;

    flex-flow: row wrap;

    justify-content: flex-start;

    align-items: stretch;

    align-content: stretch;

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    width: calc(100vw);

    height: calc(2.9rem);

    border-bottom: 0.2rem solid rgba(249,248,253,1);

}

.crop-card-logo{

    order: 0;

    flex: 0 1 auto;

    margin: 0.32rem;

    margin-right: 0.2rem;

    height: 1.9rem;

    height: calc(1.9rem - 0.64rem);

}

.crop-card-logo-img{

    width: 0.64rem;

    height: 0.64rem;

}

.crop-card-right{

    order: 1;

    flex: 0 1 auto;

    line-height: 0.28rem;

    height: 0.28rem;

    font-size: 0.34rem;

    width: 6.34rem;

    height: calc(1.9rem - 0.42rem);

    margin-top: 0.42rem;

}

.crop-card-right-title{

    width: 6.34rem;

}

.crop-card-right-title-key{

    color:rgba(25,31,37,1);

    font-weight: 600;

}

.crop-card-right-title-value{

    color:rgba(25,31,37, 0.5);

}

.crop-card-right-content{

    line-height: 0.40rem;

    height: 0.40rem;

    font-size: 0.28rem;

    width: 6.34rem;

    margin-top: 0.1rem;

    margin-bottom: 0.1rem;

}

.crop-card-right-content-key{

    color:rgba(25,31,37,0.4);

    width: 2.86rem;

    min-width: 2.86rem;

    display: inline-block;

}

.crop-card-right-content-value{

    color:rgba(25,31,37,1);

    width: 2.86rem;

    min-width: 2.86rem;

    display: inline-block;

    font-weight: 600;

}

.crop-card-line {

    order: 3;

    flex: 0 1 auto;

    width: 7.5rem;

    height: 2px;

    background:rgba(25,31,37,0.08);

    margin: 0;

    padding: 0;

}

.crop-card-footer{

    order: 4;

    flex: 0 1 auto;

    height: 0.8rem;

}

.crop-card-footer-key{

    font-size: 0.24rem;

    line-height: 0.34rem;

    height: 0.34rem;

    width: 0.76rem;

    min-width: 0.76rem;

    color:rgba(25,31,37,0.4);

    display: inline-block;

    margin: 0.24rem 0 0.22rem 0.32rem;

}

.crop-card-footer-value{

    font-size: 0.24rem;

    line-height: 0.34rem;

    height: 0.34rem;

    min-width: 0.5rem;

    font-weight: 600;

    color:rgba(25,31,37,1);

}

.crop-card-fire{

    position: absolute;

    top: 0;

    right: 0;

    width: 0;

    height: 0;

    border-width: 0.32rem;

    border-style: solid;

    border-color: rgba(255,148,62,1) rgba(255,148,62,1) transparent transparent;

    cursor: pointer;

}

.crop-card-text{

    display: inline-block;

    transform: translateX(0.03rem) translateY(-0.25rem);

}

.crop-card-text::after{

    content: "";

    display: block;

    color: #fff;

    background: transparent;

}

</style>



<template>

    <div

        v-if="isShowCropCard"

        @click="AutoSkipToPage(`enterprise/special-topics`)"

        class="crop-card-container">

        <div

            v-if="cropShowHotFire"

            class="crop-card-fire">

            <span class="crop-card-text"></span>

        </div>

        <div class="crop-card-logo">

            <img

                :src="cropLogo"

                alt=""

                class="crop-card-logo-img"

            />

        </div>

        <div class="crop-card-right">

            <span class="crop-card-right-title">

                <span class="crop-card-right-title-key">

                    {{cropName}}

                </span>

                <span class="crop-card-right-title-value">

                    {{cropNameOther}}

                </span>

            </span>

            <p class="crop-card-right-content">

                <span class="crop-card-right-content-key">法定代表人</span>

                <span class="crop-card-right-content-key">注册资本</span>

            </p>

            <p class="crop-card-right-content">

                <span class="crop-card-right-content-value">

                    {{cropOwner}}

                </span>

                <span class="crop-card-right-content-value">

                    {{cropMoney}}

                </span>

            </p>

        </div>

        <div class="crop-card-line"></div>

        <div class="crop-card-footer">

            <span class="crop-card-footer-key">品牌</span>

            <span class="crop-card-footer-value">

                {{cropName}}

            </span>

        </div>

    </div>

</template>

<script>

    // "use strict";

    /**

     *

     * @author xgqfrms

     * @license MIT

     * @copyright xgqfrms

     *

     * @description 模块-CropCard

     * @augments

     * @example

     * @link

     * @created 2019-05-22

     *

     */

    // import Light from "light";

    import defaultImage from "../../images/search-history/default.png";

    export default {

        props: [

            "cropObj",

        ],

        name: "CropCard",

        data() {

            return {

                isShowCropCard: true,

                cropId: "",

                cropName: "",

                cropNameOther: "",

                cropOwner: "",

                cropMoney: "",

                cropLogo: defaultImage,

                cropShowHotFire: false,

            };

        },

        methods: {

            AutoSkipToPage(hash =``) {

                let url = window.location.origin;

                let id = this.cropId;

                if (!hash) {

                    hash = `search`;

                }

                Light.navigate(

                    `${url}/#/${hash}`,

                    {

                        id,

                    },

                    {

                        title: "",

                        replace: false,

                    },

                );

            },

        },

        mounted() {

            // props

        },

        created() {

            try {

                if (this.cropObj) {

                    let {

                        cropId,

                        cropName,

                        cropNameOther,

                        cropOwner,

                        cropMoney,

                        cropLogo,

                        cropShowHotFire,

                    } = this.cropObj;

                    this.cropId = cropId ? cropId : "";

                    this.cropName = cropName ? cropName : "";

                    this.cropNameOther = cropNameOther ? cropNameOther : "";

                    this.cropOwner = cropOwner ? cropOwner : "";

                    this.cropMoney = cropMoney ? cropMoney : "";

                    this.cropLogo = cropLogo ? cropLogo : defaultImage;

                    this.cropShowHotFire = cropShowHotFire ? cropShowHotFire : false;

                    this.isShowCropCard = true;

                } else {

                    this.isShowCropCard = false;

                    throw new Error(`CropCard 的 cropObj 属性不可为空!`);

                }

            } catch (err) {

                console.error(`CropCard 使用错误: \n`, err);

            }

        },

    };

</script>

<style lang="css">

html{

    --highlight-color:rgba(255, 148, 62, 1);

    font-family:PingFangSC-Regular;

    font-weight:400;

}

.crop-card-container{

    position: relative;

    display: flex;

    flex-flow: row wrap;

    justify-content: flex-start;

    align-items: stretch;

    align-content: stretch;

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    width: calc(100vw);

    height: calc(2.9rem);

    border-bottom: 0.2rem solid rgba(249,248,253,1);

}

.crop-card-logo{

    order: 0;

    flex: 0 1 auto;

    margin: 0.32rem;

    margin-right: 0.2rem;

    height: 1.9rem;

    height: calc(1.9rem - 0.64rem);

}

.crop-card-logo-img{

    width: 0.64rem;

    height: 0.64rem;

}

.crop-card-right{

    order: 1;

    flex: 0 1 auto;

    line-height: 0.28rem;

    height: 0.28rem;

    font-size: 0.34rem;

    width: 6.34rem;

    height: calc(1.9rem - 0.42rem);

    margin-top: 0.42rem;

}

.crop-card-right-title{

    width: 6.34rem;

}

.crop-card-right-title-key{

    color:var(--highlight-color);

    /* color:rgba(25,31,37,1); */

    font-weight: 600;

}

.crop-card-right-title-value{

    color:rgba(25,31,37, 0.5);

}

.crop-card-right-content{

    line-height: 0.40rem;

    height: 0.40rem;

    font-size: 0.28rem;

    width: 6.34rem;

    margin-top: 0.1rem;

    margin-bottom: 0.1rem;

}

.crop-card-right-content-key{

    color:rgba(25,31,37,0.4);

    width: 2.86rem;

    min-width: 2.86rem;

    display: inline-block;

}

.crop-card-right-content-value{

    color:rgba(25,31,37,1);

    width: 2.86rem;

    min-width: 2.86rem;

    display: inline-block;

    font-weight: 600;

}

.crop-card-line {

    order: 3;

    flex: 0 1 auto;

    width: 7.5rem;

    height: 2px;

    background:rgba(25,31,37,0.08);

    margin: 0;

    padding: 0;

}

.crop-card-footer{

    order: 4;

    flex: 0 1 auto;

    height: 0.8rem;

}

.crop-card-footer-key{

    font-size: 0.24rem;

    line-height: 0.34rem;

    height: 0.34rem;

    width: 0.76rem;

    min-width: 0.76rem;

    color:rgba(25,31,37,0.4);

    display: inline-block;

    margin: 0.24rem 0 0.22rem 0.32rem;

}

.crop-card-footer-value{

    font-size: 0.24rem;

    line-height: 0.34rem;

    height: 0.34rem;

    min-width: 0.5rem;

    font-weight: 600;

    color:rgba(25,31,37,1);

}

.crop-card-fire{

    position: absolute;

    top: 0;

    right: 0;

    width: 0;

    height: 0;

    border-width: 0.32rem;

    border-style: solid;

    border-color: rgba(255,148,62,1) rgba(255,148,62,1) transparent transparent;

    cursor: pointer;

}

.crop-card-text{

    display: inline-block;

    transform: translateX(0.03rem) translateY(-0.25rem);

}

.crop-card-text::after{

    content: "";

    display: block;

    color: #fff;

    background: transparent;

}

</style>

vue & child component & props的更多相关文章

[Vue] Parent and Child component communcation
By building components, you can extend basic HTML elements and reuse encapsulated code. Most options ...
二、Vue组件(component)：组件的相互引用、通过props实现父子组件互传值
一.组件各部分说明及互相引用 1.一个vue组件由三个部分组成 Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 1.1 组件的基本引用代码 ...
Vue组件选项props
前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
vue学习：props，scope，slot，ref，is，slot，sync等知识点
1.ref :为子组件指定一个索引 ID,给元素或者组件注册引用信息.refs是一个对象,包含所有的ref组件. <div id="parent"> <user- ...
【转存】Vue组件选项props
原帖地址前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 ...
vue之component
因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data.computed.watch.methods 以及生命周期钩子等.仅有的例外是像 el 这样根实例特有的选 ...
vue框架中props的typescript用法
vue框架中props的typescript用法在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式. javascript写法 Vue.compo ...
[Angular 2] @ViewChild to access Child component's method
When you want to access child component's method, you can use @ViewChild in the parent: Parent Compo ...
前端性能优化成神之路--vue组件懒加载（Vue Lazy Component ）
---恢复内容开始--- 使用组件懒加载的原因我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

随机推荐

通过 profiling 定位 golang 性能问题 - 内存篇原创张威虎滴滴技术 2019-08-02
通过 profiling 定位 golang 性能问题 - 内存篇原创张威虎滴滴技术 2019-08-02
Spring框架——事务管理方式搭建一个小的项目
学习Spring框架,通过事务管理的方式搭建一个小的项目,该项目可以查询对数据库中的图书库存数量进行修改. 首先,使用MVC分层的设计模式思想搭建项目目录结构. 此部分代码源码之中都有相关注释,所以尽 ...
报表生成工具ireport
最近又开始学习新的玩意儿了,扒拉扒拉网上的资源,先捣鼓个思维导图.
KVM （虚拟机创建及管理,存储管理）
创建KVM虚拟机 1.图形化界面创建第一步:查看软件包组 yum grouplist 第二步:下载GUI界面的软件包组 yum groupinstall "Server with GUI& ...
Thank in Java
Think in Java 2.一切都是对象 2.1 引用操作对象 Java 中一切都是对象,因此可以采用单一固定得语法. 操作对象得标识符实际上是对对象得一个 "引用"refer ...
Python实现量子态采样
什么是量子态矢量? 在前面一篇量子系统模拟的博客中,我们介绍了使用python去模拟一个量子系统演化的过程.当我们尝试理解量子态和量子门操作时,可以通过其矩阵形式的运算来描述量子态演化的过程: \[\ ...
vs中python包安装教程
vs安装python很简单,只需要在vs安装包中选择python就可以了,这里使用的python3.7: 如果有了解,都知道安装python包的指令:"pip install xxx&quo ...
基于线段树的RMQ
RMQ(Range Minimum/Maximum Query)区间最值查询,即给出长度为n的数组A,以及m组询问s.t(s<=t<=n),返回区间[s,t]中的最值. 基于线段树的方法实 ...
LA 3641 Leonardo的笔记本 & UVA 11077 排列统计
LA 3641 Leonardo的笔记本题目给出26个大写字母的置换B,问是否存在要给置换A,使得 $A^2 = B$ 分析将A分解为几个循环,可以观察经过乘积运算得到$A^2$后,循环 ...
Codeforces Round #672 (Div. 2)
比赛链接:https://codeforces.com/contest/1420 A. Cubes Sorting 题意给出一个大小为 $n$ 的数组 $a$,每次只可以交换相邻的两个元素,最多交换 ...

vue & child component & props

vue & child component & props

vue components

vue register component single file

TODO list

vue card components demo

vue & child component & props的更多相关文章

随机推荐

热门专题