vue自定义组件与父子组件之间传值

vue自定义组件与父子组件之间传值

  1 <template>
  2   <div>
  3     <el-row :gutter="20" class="card-header">
  4       <span>{{ name }}</span>
  5     </el-row>
  6     <el-row class="cus-card-inform">
  7       <el-col :span="8" class="card-col-inform">
  8         <div class="card-number-unit">
  9           <span class="card-col-num">{{ policyNum}}</span>
 10           <span class="card-col-unit"> {{ unitone }}</span>
 11         </div>
 12         <p>{{ policytitle }}</p>
 13       </el-col>
 14       <el-col :span="2" class="card-col-line"></el-col>
 15       <el-col :span="14" class="card-col-inform">
 16         <div class="card-number-unit">
 17           <span class="card-col-num">{{ customer_total_premium }}</span>
 18           <span class="card-col-unit"> {{ unittwo }}</span>
 19         </div>
 20         <p>{{ totalcoast }}</p>
 21       </el-col>
 22       <el-col class="col-card-inform">
 23         <el-row :gutter="20" class="icon-inform-row">
 24           <el-col :span="8">
 25             <div @click="createEventClick()">
 26               <div class="image-inform">
 27                 <el-image :src="iconImageOne" class="iconImage" ref="create-event"></el-image>
 28               </div>
 29               <p class="iconInform">{{ eventtitleone }}</p>
 30             </div>
 31           </el-col>
 32           <el-col :span="8">
 33             <div @click="policyLetterClick()">
 34               <div class="image-inform">
 35                 <el-image :src="iconImageTwo" class="iconImage" ref="customer-letter"></el-image>
 36               </div>
 37               <p class="iconInform">{{ eventtitletwo }}</p>
 38             </div>
 39           </el-col>
 40           <el-col :span="8">
 41             <div @click="memorabiliaClick()">
 42               <div class="image-inform">
 43                 <el-image :src="iconImageThree" class="iconImage" ref="memor-abilia"></el-image>
 44               </div>
 45               <p class="iconInform">{{ eventtitlethree }}</p>
 46             </div>
 47           </el-col>
 48         </el-row>
 49       </el-col>
 50     </el-row>
 51   </div>
 52 </template>
 53 <script>
 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().left
112       let top = this.$refs["create-event"].$el.getBoundingClientRect().top
113       let offsetHeight = this.$refs["create-event"].$el.offsetHeight
114       let offsetWidth = this.$refs["create-event"].$el.offsetWidth
115       let protocol = "createEventAction:";
116       let parameter = {
117         x: left,
118         y: top,
119         height: offsetHeight,
120         width: offsetWidth
121       };
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().left
128       let top = this.$refs["customer-letter"].$el.getBoundingClientRect().top
129       let offsetHeight = this.$refs["customer-letter"].$el.offsetHeight
130       let offsetWidth = this.$refs["customer-letter"].$el.offsetWidth
131       // this.$refs.top.$el.offsetHeight
132       let protocol = "customerLetterAction:";
133       let parameter = {
134         x: left,
135         y: top,
136         height: offsetHeight,
137         width: offsetWidth
138       };
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().left
146       let top = this.$refs["memor-abilia"].$el.getBoundingClientRect().top
147       let offsetHeight = this.$refs["memor-abilia"].$el.offsetHeight
148       let offsetWidth = this.$refs["memor-abilia"].$el.offsetWidth
149       // this.$refs.top.$el.offsetHeight
150       let protocol = "memorabiliaAction:";
151       let parameter = {
152         x: left,
153         y: top,
154         height: offsetHeight,
155         width: offsetWidth
156       };
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 </script>
168 <style scoped>
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 </style>

 

组件使用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 ></Card>

 

  • 自定义组件中用到父子组件传值
posted @ 2020-01-07 17:29  sinceForever  阅读(293)  评论(0)  编辑  收藏  举报