本文共 3702 字，大约阅读时间需要 12 分钟。

组件

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

// 提示： v-bind:  简写就是  :           v-bind:title="xxx"  就是 :title=:"xxx"// 传参 - 静态参数  
   // 动态赋予一个变量的值
   // 动态赋予一个复杂表达式的值
   // 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue// 这是一个 JavaScript 表达式而不是一个字符串。
   // 用一个变量进行动态赋值。
   // 包含该 prop 没有值的情况在内，都意味着 `true`。
   // 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue // 这是一个 JavaScript 表达式而不是一个字符串。
   // 用一个变量进行动态赋值。
   ...// 特殊注意写法
   // post内容post: { id: 1, title: 'My Journey with Vue' }// 等同于
   

组件内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]() // 不推荐

插槽

// 父 使用 子组件
   
      Your Profile   // 这个地方要没有插槽 就不会显示    
      
      // 甚至可以加组件
   // 子组件// 找个适当的位置放入一下神奇代码
   

具名插槽

// 子 定义具名插槽
   
  
    
    
       
    
  
    
    
       
    
  
    
   
// 父 使用
     
      
    
A paragraph for the main content.
  
    
And another one.
  
    
   // v-slot:header 使用这个指令

作用域插槽

// 子  current-user  
    // 父
       
    
父组件内容
    
    	// 或者这个样子	
    
   dwpObj1: {    name: 'dwp',    tt: 't1'}// 这样可以让父组件在插槽中使用子组件中的数据

将原生事件绑定到组件

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

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

  {  { 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 }}            `})

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

.sync 修饰符

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

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

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

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

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

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

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

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

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