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. （Oracle）DDL及其数据泵导入导出（impdp/expdp）

    create tablespace ybp_dev datafile 'G:\app\Administrator\oradata\health\ybp_dev1.dbf' size 10m autoe ...

  2. Folly解读（零） Fbstring—— 一个完美替代std::string的库

    string 常见的三种实现方式 eager copy COW SSO Fbstring 介绍 Storage strategies Implementation highlights Benchma ...

  3. Dockerfile，Dockerfile 参考文档

    Dockerfile,Dockerfile 参考文档 1.Dockerfile 1.1Usage 1.2Format 1.3Parser directives 1.4escape 1.5Environ ...

  4. Django（图书管理系统）

    图书管理系统 注意事项 1.models 要创建好,规划好自己的表,以及各种表关系 2.url正则要写好 3.settings的配置 4.利用bootstarp 进行布局更漂亮哦 5.注意orm  各 ...

  5. Cisco的互联网络操作系统IOS和安全设备管理器SDM__散知识点1

    1.启动路由器:当你初次启动一台Cisco路由器时,它将运行开机自检(POST)过程.如果通过了,它将从闪存中查找Cisco IOS,如果有IOS文件存在,则执行装载操作(闪存是一个可电子擦写.可编程 ...

  6. BPF CO-RE 示例代码解析

    BPF CO-RE 示例代码解析 在BPF的可移植性和CO-RE一文的末尾提到了一个名为runqslower的工具,该工具用于展示在CPU run队列中停留的时间大于某一值的任务.现在以该工具来展示如 ...

  7. ElasticSearch的查询（二）

    一.Query String search 添加测试数据 PUT test_search { "mappings": { "test_type": { &quo ...

  8. Codeforces Round #656 (Div. 3) B. Restore the Permutation by Merger

    题目链接:https://codeforces.com/contest/1385/problem/B 题意 有两个大小为 $n$ 的相同的排列,每次从二者或二者之一的首部取元素排入新的数组,给出这个大 ...

  9. hdu1517 A Multiplication Game

    Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission ...

  10. Codeforces Round #540 (Div. 3) C. Palindromic Matrix (大模拟)

    题意:给你\(n\)个数,判断是否能构成一个\(n\)X\(n\)的回文矩阵,若可以,输出\(YES\)和矩阵,否则输出\(NO\). 题解:如果这个矩阵的行/列元素是偶数的话,很好办,所有出现的数一 ...