current position:Home>[Vue] use of slots - Review

[Vue] use of slots - Review

2022-05-15 02:10:57Triumph-light

Due to the recent completion of the design , Want to optimize the project , To improve the vue The core idea of —— Componentization , Avoid making wheels repeatedly , It has been reused in some places in the project form Forms , The reason for this is that different forms , The buttons required are also different , So my approach is to put all the buttons in the parent component , This leads to a problem , That is, I can't trigger the final verification submission of the form , So today I reviewed the slot , Improved componentization .

The basic part

Definition :
A slot is a capability provided for the packager of a component , Put the uncertain content , The part you want to specify is defined as a slot
v-slot Use of instructions :

  • effect : Put the specified content into a slot , Must be used in template and components On the body
  • Abbreviation form :#
  • notes : For each of these slot, There are name attribute , If you omit name attribute , There is a default name called default, When using components , By default, the content provided will be filled in with the name default In the slot
  • example :
//  Parent component 
<Left>
	<template #default>
		<p> This is a </p>
	</template>
</Left>

// left Components 
<slot></slot>

Back up content :
When packaging components , The backup slot can provide reserved content for ( Default content ), If the slot user does not write any data to it , The backup content will take effect
A named slot :
Slot with name , Usually with the above v-slot Instructions for use
Scope slot :

  • effect : Transfer the data on the slot to the components using the slot , So the son passes the value to the father
  • Use :
<template #content="obj">
	<p>{
    {
     obj.msg }}</p>
</template>

<slot name="content" msg="hello"></slot>

Case study :

Realize the reuse of form components , Display different buttons in the form according to the needs , At the same time, verify the form when submitting , If the form fails to pass the verification, it is not like the request initiated by the background .

Because the button is in the parent component , The verification of the form is in the sub component , So here's a question about how to call subcomponents , The following will explain how to call :
adopt ref To get the DOM Elements , because export default Is the default export , So you can get all the methods, Therefore, the subcomponents are ref binding , In the parent component, use this.$refs.xxx.xxx, The first is the name , The second is the method name

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div class="form-box">
      <CommonForm ref="form" :formLabel="formLabel" :form="form">
        <template #submit>
          <el-button type="primary" @click="submit"> Upload </el-button>
        </template>
      </CommonForm>
    </div>
  </div>
</template>

<script>
import CommonForm from './components/CommonForm.vue'

export default {
    
  name: 'App',
  components: {
    
    CommonForm
  },
  data () {
    
    return {
    
      formLabel: [
        {
    
          model: 'password',
          label: ' password ',
          type: 'input'
        },
        {
    
          model: 'checkpass',
          label: ' Confirm the password ',
          type: 'input'
        }
      ],
      form: {
    
        password: '',
        checkpass: ''
      }
    }
  },
  methods: {
    
    submit () {
    
      this.$refs.form.submitForm()
    }
  }
}
</script>

<style scoped>
#app {
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.form-box {
    
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<template>
  <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" @click="submitForm">
    <el-form-item  :prop="item.model" v-for="item in formLabel" :key="item.model" :label="item.label">
      <!--  eslint-disable-next-line vue/no-mutating-props -->
      <el-input v-if="item.type==='input'" :placeholder="' Please enter '+item.label" v-model="form[item.model]"></el-input>
    </el-form-item>
    <el-form-item>
      <!--  Slot for storing buttons  -->
      <slot name="submit"></slot>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
    
  props: {
    
    formLabel: Array,
    form: Object
  },
  data () {
    
    const validatePass = (rule, value, callback) => {
    
      if (value === '') {
    
        callback(new Error(' Please input a password '))
      } else {
    
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
    
      if (value === '') {
    
        callback(new Error(' Please input the password again '))
      } else if (value !== this.form.password) {
    
        callback(new Error(' The two passwords are not the same !'))
      } else {
    
        callback()
      }
    }
    return {
    
      rules: {
    
        password: [{
     validator: validatePass, trigger: 'blur' }],
        checkpass: [{
     validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  methods: {
    
    submitForm () {
    
      this.$refs.ruleForm.validate((valid) => {
    
        if (valid) {
    
          //  The test passed 
          setTimeout(() => {
    
            console.log(this.form)
          }, 1000)
        } else {
    
          return false
        }
      })
    }
  }
}
</script>

<style></style>

element ui The use of component library depends on
understand element ui Form component usage

copyright notice
author[Triumph-light],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120526194849.html

Random recommended