“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”
There is such a function that you need to click to switch and show different functional components, what would you do?
Can have a look at the code I took over please refrain from laughing!!
Good guy, give me whole meng, still can play so???? No nonsense, direct to my solution, if there is a better please contact me!!
- Vue2 jsx
export default {
name: "juejin".props: {
value: {
type: String.default: "",}},render(h) {
return (
The business component follows a principle of internal processing and internal digestion
// Events are best handled internally by the business component. The parent component is only responsible for passing values
<div class="juejin">{(h(this.value), { props: { ... this.$attrs } })}</div>); }};Copy the code2.Vue2 vue
The JSX above me actually does the same thing. This is a built-in component of VUE. Just check out the official documentationCopy the code
3.vue3 jsx or tsx
import { defineComponent, resolveComponent, h } from "vue";
import { Vue } from "vue-class-component";
interface Itest extends Vue {
func1: void;
}
const test = defineComponent({
name: "Test".props: {
value: {
type: String.default: "",}},setup(pros,con) {
return () = > {
// The resolveComponent method is used to find components. You pass in a name and it will help you find a registered component
// Vue3 doesn't have this, so get attrs from the context
// copy the type. // copy the typeh(resolveComponent(pros.value), { ... con.attrs }); }; }});export default test;
Copy the codeIf you have a better way to look at this situation, please leave a message to tell me, thank you!! Learn and grow together
Let’s look at using objects or maps for forwarding
export default {
name: "juejin".props: {
value: {
type: String.default: "",}},methods: {
/ / component a
renderA() {
return <div>I'm component A</div>;
},
/ / component a
renderB() {
return <div>I'm component B</div>;
},
/ / component a
renderC() {
return <div>I'm component C</div>;
},
// Distribute by object
isRenderComponents(key) {
const componentsObj = {
a: this.renderA,
b: this.renderB,
c: this.renderC,
};
if (componentsObj[key]) {
// This is how it works
return componentsObj[key]();
}
// If you want to display the default component
return this.renderA(); }},render() {
const juejinArr = [
{
key: "a"}, {key: "b"}, {key: "c"}, {key: "d".//a
},
{
key: "e".//a
},
{
key: "f".//a},];return (
<div class="juejin">{juejinarr.map ((I) => {return this.isRenderComponents(i.key); })}</div>); }};Copy the code
// Use the same page of a business system and this page is horrible to 5200 lines (plus CSS)
// If you write return in if, I don't say anything...
// Solution
const currentServiceNameObj = {
a:"1".b:"2".c:"3".d:"4".e:"5".f:"6".g:"Seven".h:"8".i:"9",}// Write a hint in the else box
if (currentServiceNameObj[this.currentService.name]) {
params.serviceId = currentServiceNameObj[this.currentService.name]
}
Copy the codeSimilarly if you have a particularly complex page you can concatenate multiple components and then forward through objects (using JSX)
Let’s look at the following situation – if we use the first-class citizen function to simplify the business
// This is the one I extracted from the template tag that has been optimized
/** * v-if="item.trackStatus === 1 && (item.Code === 'CHECK_END' || item.Code === 'GROUP_REVIEW' || item.Code === 'PROJECT_REVIEW' || item.Code === 'CHECK_MODIFY' || item.Code === 'PRE_CHECK' || item.Code === 'PRE_CHECK2' || item.Code === 'PRE_CHECK3' || item.Code === 'CHECK' || item.Code === 'CHECK2' || item.Code === 'CHECK3' || item.Code === 'CHECK_1' || item.Code === 'ENGINE_CHECK1' || item.Code === 'ENGINE_CHECK2' || item.Code === 'ENGINE_CHECK3' || item.Code === 'ENGINE_CHECK4' || item.Code === 'ENGINE_CHECK5' || item.Code === 'ENGINE_CHECK_1' || item.Code === 'SAFE_CHECK' */
// I didn't know about this until one day, my sister told me that some new data were added, but the previous data were all good, and the new data could not be used.
At that time, the blood pressure went up immediately. I took 5 tablets of antihypertensive medicine to recover it. At present, this place is fried as long as it exceeds 5
// There are dozens of places in the project to use this, I will show you the modified appearance, if you have better conditions, please contact me
function setBtnShowStatus (nodeCode) {
if (nodeCode) {
const nodeCodeArr = [
'CHECK_END'.'GROUP_REVIEW'.'PROJECT_REVIEW'.'CHECK_MODIFY'.'CONFIRM'.'SAFE_CHECK']
const engineStatus = nodeCode.includes('ENGINE_CHECK')
const nodeCodeStatus = nodeCodeArr.includes(nodeCode)
const preStatus = nodeCode.includes('PRE_CHECK')
const checkStatus = nodeCode.includes('CHECK')
if (engineStatus || nodeCodeStatus || preStatus || checkStatus) {
return true
} else {
return false}}return false
}
1
// that's about it. You just need to change all the same things here, and you don't have to look around, and you don't have a page full of 1000,2000 lines
// My heart refused to accept this kind of code.
Copy the codeconclusion
I don’t want to waste my limited career in endless business, so I need to constantly learn and reflect on my work content and be good at taking notes. A little personal insight.
1 learning source code to learn ideas, what is a good way to write, can be used for reference, associated with their own work, technology is to serve people!
2. Take notes. No matter how smart your brain is, there will always be times when you forget.
3. Relax your mind and don’t put too much pressure on yourself. Good things always happen to people as long as they are alive.
4. Learn more, learn with purpose, and then must practice, must use what you learn in the work, even if you are a person, you also want to use, so as to constantly consolidate and deepen, report mistakes to solve it. Resolving errors is also a great way to learn better.
5. I write a lot of business every day, and try to solve problems in different ways. I read MDN if I don’t understand, and search if I don’t understand.
6. Do a good job in technical accumulation, other people do good and fast, maybe they just write a lot, technical accumulation is enough (I myself will put my components in a folder, and then upload to Git, constantly update, constantly optimize, Saturday and Sunday will continue to optimize.) You save it for two years, and you realize that you’ve already implemented most of the features.
7. The development time will be a few more days, god knows what complicated diseases are waiting for you, more time can also be more time to think, people’s energy is limited, in addition to work there is a great world waiting for you to see!!
8. Learn for a period of time (when learning, you must take notes, save notes, don’t just rely on your brain), play for a period of time, study every day, work overtime every day, people tend to lose anger, can not raise the energy to what, this state is very poor, to adjust well.
9 fitness, exercise, sometimes speaking is not necessarily good, the beat on the beat, the scold on the scold, if the body is not good may be killed, outweighs the loss!!
10. Work is part of your life, not all of it. Your boss is a human being. Here’s a joke: I don’t have a job anymore, but I have a lot of bosses.