vue自定义组件与父子组件之间传值
1 2 3 4 {{ name }} 5 6 7 8 9 {{ policyNum}} 10 {{ unitone }} 11 12 {{ policytitle }} 13 14 15 16 17 {{ customer_total_premium }} 18 {{ unittwo }} 19 20 {{ totalcoast }} 21 22 23 24 25 26 27 28 29 {{ eventtitleone }} 30 31 32 33 34 35 36 37 {{ eventtitletwo }} 38 39 40 41 42 43 44 45 {{ eventtitlethree }} 46 47 48 49 50 51 52 53 54 export default { 55 props: { 56 name: { 57 type: String, 58 default: "" 59 }, 60 policyNum: { 61 type: String, 62 default: "" 63 }, 64 unitone: { 65 type: String, 66 default: "" 67 }, 68 customer_total_premium: { 69 type: String, 70 default: "" 71 }, 72 unittwo: { 73 type: String, 74 default: "" 75 }, 76 policytitle: { 77 type: String, 78 default: "" 79 }, 80 totalcoast: { 81 type: String, 82 default: "" 83 }, 84 eventtitleone: { 85 type: String, 86 default: "" 87 }, 88 eventtitletwo: { 89 type: String, 90 default: "" 91 }, 92 eventtitlethree: { 93 type: String, 94 default: "" 95 }, 96 iconImageOne: { 97 type: String, 98 default: "" 99 },100 iconImageTwo: {101 type: String,102 default: ""103 },104 iconImageThree: {105 type: String,106 default: ""107 }108 },109 methods: {110 createEventClick: function() {111 let left = this.$refs["create-event"].$el.getBoundingClientRect().left112 let top = this.$refs["create-event"].$el.getBoundingClientRect().top113 let offsetHeight = this.$refs["create-event"].$el.offsetHeight114 let offsetWidth = this.$refs["create-event"].$el.offsetWidth115 let protocol = "createEventAction:";116 let parameter = {117 x: left,118 y: top,119 height: offsetHeight,120 width: offsetWidth121 };122 jsTooc.c3_navtive_user.doActionFunc(protocol, parameter, function(data){123 });124 console.log("createEventClick")125 },126 policyLetterClick: function() {127 let left = this.$refs["customer-letter"].$el.getBoundingClientRect().left128 let top = this.$refs["customer-letter"].$el.getBoundingClientRect().top129 let offsetHeight = this.$refs["customer-letter"].$el.offsetHeight130 let offsetWidth = this.$refs["customer-letter"].$el.offsetWidth131 // this.$refs.top.$el.offsetHeight132 let protocol = "customerLetterAction:";133 let parameter = {134 x: left,135 y: top,136 height: offsetHeight,137 width: offsetWidth138 };139 jsTooc.c3_navtive_user.doActionFunc(protocol, parameter, function(data){140 });141 142 console.log("policyLetterClick")143 },144 memorabiliaClick: function() {145 let left = this.$refs["memor-abilia"].$el.getBoundingClientRect().left146 let top = this.$refs["memor-abilia"].$el.getBoundingClientRect().top147 let offsetHeight = this.$refs["memor-abilia"].$el.offsetHeight148 let offsetWidth = this.$refs["memor-abilia"].$el.offsetWidth149 // this.$refs.top.$el.offsetHeight150 let protocol = "memorabiliaAction:";151 let parameter = {152 x: left,153 y: top,154 height: offsetHeight,155 width: offsetWidth156 };157 jsTooc.c3_navtive_user.doActionFunc(protocol, parameter, function(data){158 });159 160 console.log("memorabiliaClick")161 }162 },163 // created() {164 // this.$emit("createEventClick")165 // }166 };167 " _ue_custom_node_="true">168 169 .card-header {170 display: flex;171 align-items: center;172 margin: 0 !important;173 }174 .card-header span {175 font-family: 'PingFangSC-Semibold';176 font-size: .3rem;177 color: #554344;178 }179 .header-image {180 padding-right: .2rem;181 width: .5rem;182 height: .5rem;183 }184 .card-number-unit {185 display: flex;186 justify-content: center;187 align-items: baseline;188 }189 .cus-card-inform {190 padding-top: .1rem;191 }192 .col-card-inform {193 padding-top: .1rem;194 }195 .card-col-inform {196 text-align: center;197 }198 .card-col-num {199 font-size: .25rem;200 color: #d31145;201 font-family: "DINPro-Medium";202 }203 .card-col-unit {204 font-size: .14rem;205 color: #d31145;206 }207 .cus-card-inform p {208 /* width: 212px;209 height: 15px; */210 color: #685556;211 font-family: "PingFangSC-Medium";212 font-size: .12rem;213 font-weight: 400;214 line-height: .15rem;215 padding-top: 0.06rem;216 }217 .icon-inform-row {218 margin: 0 !important;219 }220 .iconImage {221 width: .39rem;222 height: .39rem;223 }224 .iconInform {225 color: #b8b8b8;226 font-family: "PingFangSC-Medium";227 font-size: .1rem;228 font-weight: 400;229 white-space: nowrap;230 overflow: hidden;231 text-overflow: ellipsis;232 }233 .card-col-line {234 height: .3rem;235 border-right: 0.005rem solid #b3b3b3;236 }237 .image-inform {238 display: flex;239 }240 " _ue_custom_node_="true">
组件使用js部分代码：
1 <Card 2 :name="name" 3 :policyNum="policyNum" 4 unitone="件" 5 :customer_total_premium="customer_total_premium" 6 unittwo="元" 7 policytitle="保单总数" 8 totalcoast="累计年缴保费" 9 eventtitleone="创建事件"10 eventtitletwo="客户信"11 eventtitlethree="大事记"12 :iconImageOne="iconImageOne"13 :iconImageTwo="iconImageTwo"14 :iconImageThree="iconImageThree"15 >
- 自定义组件中用到父子组件传值
