【vue】插槽的使用——复习

由于最近计设做完了，想优化一下项目，来提高vue的核心观念——组件化，避免重复造轮子，在项目中有些地方重复使用了form表单，而导致这样的原因是因为不同的表单，需要的按钮也不同，因此我的做法是将所有的按钮放到了父组件当中，这样导致了一个问题，就是我无法去触发最后对表单的一个校验提交，因此今天复习了一下插槽，提高了组件化。

基本部分

定义：
插槽是为组件的封装者提供的能力，把不确定的内容，希望由用户指定的部分定义为插槽
v-slot指令的使用：

• 作用：将内容指定放入某个插槽中，必须使用在template和components身上
• 简写形式：#
• 注：对于每一个slot，都有name属性，如果省略了name属性，则有一个默认名称叫做default，而对于使用组件时，默认情况下将会把提供的内容填充到名字为default的插槽当中
• 实例：

// 父组件
<Left>
	<template #default>
		<p>这是</p>
	</template>
</Left>

// left组件
<slot></slot>

后备内容：
封装组件时，可以为预留的插槽提供后备内容（默认内容），如果插槽使用者没有往当中写入任何数据时，后备内容将会生效
具名插槽：
拥有名字的插槽，通常配合上面的v-slot的指令进行使用
作用域插槽：

• 作用：将插槽身上的数据传给使用插槽的组件使用，相当于是子向父传值
• 使用：

<template #content="obj">
	<p>{{ obj.msg }}</p>
</template>

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

案例：

实现表单组件的重复使用，根据需求在表单里显示不同的按钮，同时要在提交的时候进行表单验证，如果表单校验没有通过的话则不像后台发起请求。

由于按钮是在父组件里的，而表单进行校验是在子组件里的，因此这里涉及到了一个如何调用子组件的问题，下面将讲解如何调用：
通过ref来获取子组件的DOM元素，由于export default是默认导出，因此可以获取到所有的methods，因此对子组件进行ref绑定，在父组件用this.$refs.xxx.xxx，第一个是名字，第二个是方法名

<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">上传</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: '密码',
          type: 'input'
        },
        {
          model: 'checkpass',
          label: '确认密码',
          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="'请输入'+item.label" v-model="form[item.model]"></el-input>
    </el-form-item>
    <el-form-item>
      <!-- 存放按钮的插槽 -->
      <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('请输入密码'))
      } else {
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        password: [{ validator: validatePass, trigger: 'blur' }],
        checkpass: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 检验通过
          setTimeout(() => {
            console.log(this.form)
          }, 1000)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style></style>

element ui 组件库使用具体看
看懂element ui表单组件使用