vue基础-组件

组件

prop 传参数 （父组件传参子组件）

// 提示： v-bind:  简写就是  :           v-bind:title="xxx"  就是 :title=:"xxx"
// 传参 - 静态参数  
<blog-post title="My journey with Vue"></blog-post>

// 动态赋予一个变量的值
<blog-post v-bind:title="post.title"></blog-post>

// 动态赋予一个复杂表达式的值
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

// 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue
// 这是一个 JavaScript 表达式而不是一个字符串。
<blog-post v-bind:likes="42"></blog-post>

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

// 包含该 prop 没有值的情况在内，都意味着 `true`。
<blog-post is-published></blog-post>

// 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue 
// 这是一个 JavaScript 表达式而不是一个字符串。
<blog-post v-bind:is-published="false"></blog-post>

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

...

// 特殊注意写法
<blog-post v-bind="post"></blog-post>
// post内容
post: { id: 1, title: 'My Journey with Vue' }
// 等同于
<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

组件内prop验证

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    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
      }
    }
  }

组件中调用自定义事件

this.$emit('my-event', '我是子组件传的数据') // 推荐
this._events['my-event'][0]() // 不推荐

插槽

// 父 使用 子组件
<navigation-link url="/profile">
  Your Profile   // 这个地方要没有插槽 就不会显示
    <!-- 添加一个图标的组件 -->
  <font-awesome-icon name="user"></font-awesome-icon>  // 甚至可以加组件
</navigation-link>

// 子组件
// 找个适当的位置放入一下神奇代码
<slot></slot>

具名插槽

// 子 定义具名插槽
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

// 父 使用
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

// v-slot:header 使用这个指令

作用域插槽

// 子  current-user
<span>
  <slot :attribute="dwpObj"></slot>
</span>

// 父
<dwp-event @my-event="homeEvent" :dwpObj="dwpObj1">
    <h2>父组件内容</h2>
    <template v-slot="dw">
		{{dw.attribute.name}}
    </template>

	// 或者这个样子
	<template v-slot="{ attribute }" slot-scope="slotProps">
        <!-- {{dw.attribute.name}} -->
        {{ attribute.name }}
        {{ slotProps.attribute.name }}
      </template>
</dwp-event>
dwpObj1: {
    name: 'dwp',
    tt: 't1'
}

// 这样可以让父组件在插槽中使用子组件中的数据

将原生事件绑定到组件

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符：

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

在有的时候这是很有用的，不过在你尝试监听一个类似 <input> 的非常特定的元素时，这并不是个好主意。比如上述 <base-input> 组件可能做了如下重构，所以根元素实际上是一个 <label>元素：

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

这时，父级的 .native 监听器将静默失败。它不会产生任何报错，但是 onFocus 处理函数不会如你预期地被调用。

为了解决这个问题，Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器。例如：

{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}

有了这个 $listeners property，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 <input> 的你希望它也可以配合 v-model 工作的组件来说，为这些监听器创建一个类似下述 inputListeners 的计算属性通常是非常有用的：

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

现在 <base-input> 组件是一个完全透明的包裹器了，也就是说它可以完全像一个普通的 <input> 元素一样使用了：所有跟它相同的 attribute 和监听器都可以工作，不必再使用 .native监听器。

.sync 修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

<text-document v-bind:title.sync="doc.title"></text-document>

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。

当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：

<text-document v-bind.sync="doc"></text-document>

这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。