vue学习笔记3 -----组件

1、组件命名

a.全小写加连接符

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

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

b、驼峰式

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板)

中使用时只有 kebab-case 是有效的。

2、全局注册和局部注册

全局注册：注册后，可以在任何新创建的根vue实例中使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue全局注册</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<runoob></runoob>
</div>

<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

局部注册-- components属性

1、普通的js对象

2、babel和webpack，单文件组件 ,工程实践中主要使用这种

props

在注册组件中属性使用驼峰式，html中应采用kebab-case，字符串模板和单文件组件仍然按定义的来。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<child a-message="hello!2"></child>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['aMessage'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<div><span>{{ aMessage }}</span></div>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

传入静态的数字，布尔值，数组，对象，用v-bind即可。

<blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:post="post"></blog-post>

另外对象所有属性传入可简写：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

下面的模板：

<blog-post v-bind="post"></blog-post>

等价于：

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

属性可以自定义验证

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 匹配任何类型)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组且一定会从一个工厂函数返回默认值
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

替换/合并已有的特性

使用组件时传了未定义的属性，会被自动转移到组件的根元素上。

使用时传入的普通属性会覆盖根原有属性，style 和class 会合并。

组件属性继承禁用

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

//todo add .............................................

v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用

自定义事件：

内容分发API ----插槽 slot

vue学习笔记3 -----组件

替换/合并已有的特性

猜你喜欢