Vue--使用Element

最新推荐文章于 2022-05-01 19:11:58 发布

amberXu璇

最新推荐文章于 2022-05-01 19:11:58 发布

阅读量214

点赞数

分类专栏： Vue 前端文章标签： Element Vue

本文链接：https://blog.csdn.net/xuxuan1997/article/details/83274501

版权

前端同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

Vue

6 篇文章 0 订阅

订阅专栏

Element官网

安装

npm i element-ui -S

运行时出现的错误

Extra semicolon：不用分号
Expected indentation of 0 spaces but found 2

注意事项

在 HTML 模板中始终使用 kebab-case
当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。

全局注册

Vue.component全局注册

Vue.component('my-component-name', {
  // ... options ...
})

局部注册

局部注册的组件在其子组件中不可用

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

通过 Babel 和 webpack 使用 ES2015 模块

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

组件的根元素直接监视原生事件

<base-input v-on:focus.native="onFocus"></base-input>

组件可能做了如下重构，所以根元素实际上是一个元素：

<label>
  {{ label }}
  <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  >
</label>

插槽（实现内容分发的API）

插槽
内容分发：将父组件的内容放到子组件指定的位置
元素作为承载分发内容的出口

单个插槽

    <navigation-link url="/profile">
      Your Profile
    </navigation-link>
     <slot></slot>会被Your Profile代替

如果没有包含一个元素，则任何传入它的内容都会被抛弃。
2. 多个插槽也叫具名插槽
具名插槽就是将某个名字的内容插到子组件对应名字里面去

      <test-slot>
      //slot=one这个div会替换掉子组件里name="one"的slot标签
      <div slot="one">
        <span>one</span>
        <span>第一个</span>
      </div> 
      //这个div没有用slot指定名字所以会替换掉子组件里没有name属性的slot标签
      <div>
        <span>此div没有slot</span>
      </div>
      //slot=two这个div会替换掉子组件里name="two"的slot标签
      <div slot="two">
        <span>two</span>
        <span>第二个</span>
      </div> 
    </test-slot>

作用域插槽：在组件上的属性，可以在组件元素内使用

<test-slot :items="items">
       <template slot-scope="props">
         <span>{{ props.addr }}</span>
         <span>{{ props.cname }}</span>
         <span>{{ props.age }}</span>
       </template>
     </test-slot>
 子组件
 <slot :cname="items[2].cname"></slot> 
    <slot :addr="items[2].addr"></slot> 
    <slot age="18"></slot> 
     props:['items'],
     created(){
    console.log('items',this.$props.items);
  }