vue & child component & props
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
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文件等 ...
随机推荐
- e.next = nil // avoid memory leaks e.prev = nil // avoid memory leaks
/Go/src/container/list/list.go:10
- python 招聘数据分析
导入包 import pandas as pd import numpy as np import matplotlib.pyplot as plt 读文件 df=pd.read_csv(r'C:\U ...
- 用RabbitMQ了好几年之后，我总结出来5点RabbitMQ的使用心得
大概从 2013 年开始,我就开始了自己和 RabbitMQ 的接触,到现在已经有七年多了. 在这七年中,既有一些对 RabbitMQ 的深度体验,更有无数的血泪史. 而根据我这么多年的使用经验,我将 ...
- Spring5源码，@Autowired
一.@Autowired所具有的功能 二.在Spring中如何使用@Autowired 三.@Autowired注解背后的工作原理 一.@Autowired所具有的功能 @Autowired是一个用来 ...
- c++复习笔记（2）
1. 类与对象 类的声明与结构,数据成员和成员函数. 成员函数可以在类外被定义.但是必须在类内声明. 封装:protect--允许类成员和派生类成员访问. 构造函数之外,还有一种初始化类成员的方法:参 ...
- java解压zip压缩包
package com.spring.mvc.zip; import java.io.File;import java.io.FileOutputStream;import java.io.Input ...
- OSPF特殊区域和LSA
OSPF路由计算优选次序: (1) 直连路由:本路由器发起的LSA 1.2: (2) 区域内路由:O: LSA 1.2: (3) 区域间路由:O IA: LSA 3: (4) 1类外部路由:O E1: ...
- CCF-I'm stuck!(BFS)
I'm stuck! 问题描述 给定一个R行C列的地图,地图的每一个方格可能是'#', '+', '-', '|', '.', 'S', 'T'七个字符中的一个,分别表示如下意思: '#': 任何 ...
- MacOS Big Sur开HiDPI
我自己的环境: 开启hidpi的目的是为了让显示更加细腻,代价是缩小了显示范围. 自己在网上看了很多帖子,也尝试了几种,有些方法已经不再适合Big Sur系统了,所以本文提供一种可用的,在Big Su ...
- 设计模式（三）——Java工厂方法模式
工厂方法模式 1 看一个新的需求 披萨项目新的需求:客户在点披萨时,可以点不同口味的披萨,比如 北京的奶酪 pizza.北京的胡椒 pizza 或者是伦敦的奶酪 pizza.伦敦的胡椒 pizza. ...