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. DevOps运动的缘起 将DevOps想象为一种编程语言里面的一个接口，而SRE类实现了这个接口

     SRE vs DevOps:是敌是友? - DockOne.io http://www.dockone.io/article/5935   RE vs DevOps:是敌是友? [编者的话]网站可靠 ...

  2. 改造xxl-job的客户端日志文件生成体系

    为什么要改造XXL-JOB原有的日志文件生成体系   xxl-job原本自己的客户端日志文件生成策略是:一个日志记录就生成一个文件,也就是当数据库存在一条日志logId,对应的客户端就会生成一个文件, ...

  3. PL/SQL 遇到问题

    报错:Initialization error Oracle client not properly installed 1.下载instanceclient并解压2.打开PL/SQL,在连接数据库的 ...

  4. CSS选择器，属性前缀，长度单位，变形效果，过渡效果，动画效果

    CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性 ...

  5. Spark JDBC系列--取数的四种方式

    Spark JDBC系列--取数的四种方式 一.单分区模式 二.指定Long型column字段的分区模式 三.高自由度的分区模式 四.自定义option参数模式 五.JDBC To Other Dat ...

  6. cassandra权威指南读书笔记--配置cassadnra

    配置集群时,要求所有节点的集群名,分区器,snitch必须相同.种子节点最好相同. 种子节点:最好每个DC,配置2个,这样即使一个DC中一个种子节点挂了,仍然有一个中子节点可用.种子节点被认为是最先加 ...

  7. 从零开始教你安装Oracle数据库

    1.数据库安装 1.1下载 根据自己的操作系统位数,到oracle官网下载(以oracle 11g 为例) 之后把两个压缩包解压到同一个文件夹内(需要注意的是,这个文件夹路径名称中最好不要出现中文.空 ...

  8. Codeforces Round #671 (Div. 2)

    比赛链接:https://codeforces.com/contest/1419 A. Digit Game 题意 给出一个 $n$ 位数,游戏规则如下: 1-indexed Raze标记奇数位 Br ...

  9. CF662C Binary Table【FWT】

    CF662C Binary Table 题意: 给出一个\(n\times m\)的\(01\)矩阵,每次可以反转一行或者一列,问经过若干次反转之后,最少有多少个\(1\) \(n\le 20, m\ ...

  10. Codeforces Round #648 (Div. 2) D. Solve The Maze

    这题犯了一个很严重的错误,bfs 应该在入队操作的同时标记访问,而不是每次只标记取出的队首元素. 题目链接:https://codeforces.com/contest/1365/problem/D ...