vue & child component & props

vue pass data to child component

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

https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

https://stackoverflow.com/questions/39199303/pass-data-from-parent-to-child-component-in-vue-js

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

  1. pass event to CropCard Components

  2. 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的更多相关文章

  1. [Vue] Parent and Child component communcation

    By building components, you can extend basic HTML elements and reuse encapsulated code. Most options ...

  2. 二、Vue组件(component)：组件的相互引用、通过props实现父子组件互传值

    一.组件各部分说明及互相引用 1.一个vue组件由三个部分组成 Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 1.1 组件的基本引用代码 ...

  3. Vue组件选项props

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  4. vue学习：props，scope，slot，ref，is，slot，sync等知识点

    1.ref :为子组件指定一个索引 ID,给元素或者组件注册引用信息.refs是一个对象,包含所有的ref组件. <div id="parent"> <user- ...

  5. 【转存】Vue组件选项props

    原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过  ...

  6. vue之component

    因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data.computed.watch.methods 以及生命周期钩子等.仅有的例外是像 el 这样根实例特有的选 ...

  7. vue框架中props的typescript用法

    vue框架中props的typescript用法 在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式. javascript写法 Vue.compo ...

  8. [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 ...

  9. 前端性能优化成神之路--vue组件懒加载（Vue Lazy Component ）

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

随机推荐

  1. （Sqlserver）sql求连续问题

    题目一:create table etltable( name varchar(20) , seq int, money int); create table etltarget ( name var ...

  2. 逻辑bug 测试用例

    1. 179. 最大数 - 力扣(LeetCode) https://leetcode-cn.com/problems/largest-number/ 给定一组非负整数 nums,重新排列它们每个数字 ...

  3. django 请求处理流程 链路追踪

    class BaseMiddleware: # https://github.com/django/django/blob/master/tests/utils_tests/test_decorato ...

  4. 单机模拟配置Eureka集群

    首先先提醒单机部署的重要点 如果使用一个ip地址(适用于单网卡)每个eureka实例使用不同的域名映射到同一个IP 如果每个eureka实例使用不同的IP(多网卡),要确保这些IP要都表示本地 本文假 ...

  5. Mysql 5.5升级5.8

    前言,因为升级跳板机,需要将mariadb 升级到10.2,也就是对应MySQL的5.8,废话不多说下面开始进行mariadb 5.5 的升级 Welcome to the MariaDB monit ...

  6. Nginx，Nginx 搭建图片服务器

    Nginx Nginx 概述 反向代理 工作流程 优点 1:保护了真实的web服务器,保证了web服务器的资源安全 2:节约了有限的IP地址资源 3:减少WEB服务器压力,提高响应速度 4:其他优点 ...

  7. servelet 实现Post接口访问

    先上代码: package com.jovtec.galaxy.mailbox; import java.io.BufferedReader; import java.io.IOException; ...

  8. checkbox限制选中个数

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. 使用mybatis自动实现接口封装返回结果集

    import java.lang.annotation.Annotation; import java.lang.annotation.Documented; import java.lang.ann ...

  10. Flink-v1.12官方网站翻译-P023-The Broadcast State Pattern

    广播状态模式 在本节中,您将了解如何在实践中使用广播状态.请参考状态流处理,了解状态流处理背后的概念. 提供的API 为了展示所提供的API,我们将在介绍它们的全部功能之前先举一个例子.作为我们的运行 ...