vue-组件component

Posted 2021-09-14 Liane

一、组件注册
1、组件名：可以使用kebab-case短横线分隔命名,也可以使用PascalCase驼峰命名。
2、全局注册
使用Vue.component来创建的组件作用域是全局，在任何新创建的Vue根实例（new Vue）的模板中，都可以使用。

<div id="app">
    <my-component title=\'计数器\' text=\'添加\' @clicknow=\'getCount\'>
        <!-- span会被放如到组件中<slot>标签的位置 -->
        <span>我是一个插入到组件末尾的span</span>
    </my-component>
</div>
<script>
Vue.component(\'myComponent\', {
    props:[
        \'title\',
        \'text\'
    ],
    data: function(){
        return {
            count: 0
        }
    },
    methods:{
        add:function(){
            this.count++
            //可以派发一个事件到组件实例，抛出一个值
            //使用$emit(),第一个参数是事件名称，第二个值是传递参数
            this.$emit(\'clicknow\',this.count)
        }
    },
    template: `<div>
        {{title}}
        <div class="btn" @click=\'add\'>{{text}}</div>
        <span>{{count}}</span>
        <!--通过插槽，可以向一个组件传递内容-->
        <slot></slot>
    </div>`
})
let vm = new Vue({
    el: \'#app\',
    data: {},
    methods: {
        getCount:function(e){
            alert(e)
        }
    }
})
</script>

---

3、局部注册

    <div id="app">
      <div class="btn" @click="showConfirm">删除文件</div>
      <my-confirm v-if="isShow" title="删除文件" @myclick="checkDelete">
        <p>确认删除吗？删除后无法恢复！</p>
      </my-confirm>
    </div>
    <script>
      let vm = new Vue({
        el: \'#app\',
        data: {
          isShow: false
        },
        methods: {
          checkDelete: function (e) {
            e && console.log(\'删除成功\')
            this.isShow = false
          },
          showConfirm: function () {
            this.isShow = true
          }
        },
        components: {
          myConfirm: {
            props: [\'title\'],
            data: function () {
              return {}
            },
            methods: {
              cancel: function () {
                this.$emit(\'myclick\', false)
              },
              confirm: function () {
                this.$emit(\'myclick\', true)
              }
            },
            template: `<div>
                <span>{{title}}</span>
                <slot></slot>
                <button @click=\'cancel\'>取消</button>
                <button @click=\'confirm\'>确认</button>
              </div>`
          }
        }
      })
    </script>

---

4、单文件注册
使用.vue文件注册
1)、安装npm(安装node.js,内置有npm,不需要单独安装npm)
2)、安装vue-cli

npm install -g @vue/cli

3)、安装webpack

npm install -g webpack

在项目的components文件夹下，创建一个First.vue文件，注册组件如下：

<template>
  <section class="first">
    <h2>{{msg}}</h2>
  </section>
</template>
<script>
export default {
  name: \'First\',
  data:function(){
    return {}
  },
  props:{
    msg:{
      type: String,
      default: \'test\'
    }
  },
  methods:{}
}
</script>

<style scoped>
.first {
  color: red;
}
</style>

在需要组件的地方使用import引入即可

<template>
  <first msg=\'test\'></first>
</template>
<script>
  import First from \'./components/first.vue\'

  export default {
    components: {
      First
    }
  }
</script>

---

二、Prop
因html中大小写不敏感，则在使用组件作为DOM模板时，驼峰命名的Prop名都需要使用kebab-case短横线分割命名

<div id="app"> 
  <!-- 在 HTML 中是 kebab-case 的 -->
  <blog-post post-title="hello!"></blog-post>
</div>
<script>
  Vue.component(\'blog-post\', {
    // 在 javascript 中是 camelCase 的
    //props: [\'postTitle\'],
    
    //prop可以指定任意类型,例如有props如下：[\'postTitle\',\'count\',\'isShow\',\'list\',\'obj\',\'callback\']
    //可以写成对象的形式，注明类型
    pops:{
      PostTitle: String,
      count: Number,
      isShow: Boolean,
      list: Array,
      obj: Object,
      callback: Function
      //...或者任意类型
    }
     
    template: \'<h3>{{ postTitle }}</h3>\'
  })
  let vm = new Vue({
    el: \'\'app,
    components:{
      blog-post
    }
  })
</script>

动态prop
使用v-bind绑定对应的prop名，可以传入动态的值

<my-component :title=\'title\'></my-component>

传入一个对象的所有property
若想将一个对象obj的所有属性作为单个prop传入，可以使用不带参数的v-bind

obj:{
  title: \'My component\',
  list: [1,2,3]
}

<my-component v-bind=\'obj\'></my-component>
<!--等价于-->
<my-component v-bind:title=\'obj.title\'></my-component>
<my-component v-bind:list=\'obj.list\'></my-component>

---