Vue(篇幅二)

关于如何学习Vue，Vue的缔造者尤雨溪前辈曾经在知乎发表过一篇新手向：Vue 2.0 的建议学习顺序。
关于Vue其他知识介绍：篇幅一

5. 组件

创建(注册)组件

// 注册（全局注册）
Vue.component('my-component', {
  template: 'A custom component!'
})

组件在注册之后，便可以在父实例的模块中以自定义元素的形式使用。要确保在初始化根实例之前注册了组件：


  

//这里注册
// 创建根实例
new Vue({
  el: '#example'
})

data
通过Vue构造器创建的组件中，data属性必须是函数。

Vue.component('my-app',{
 template: '{{message}}',
data: function(){
  return {
    message: 'hello'
  }
}
})

Props
子组件通过显式地用props选项声明它期待获得的数据。
单向数据流
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。
为什么我们会有修改 prop 中数据的冲动呢？通常是这两种原因：
（1）prop 作为初始值传入后，子组件想把它当作局部数据来用；
（2）prop 作为初始值传入，由子组件处理成其它数据输出。
对这两种原因，正确的应对方式是：
定义一个局部变量，并用 prop 的值初始化它：

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

定义一个计算属性，处理 prop 的值并返回。

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

Prop验证
组件传入的props可以进行数据验证。要指定验证规格，需要用对象的形式，而不能用字符串数组。如：

Vue.component('my-app'，{
  props: {
    propA: Number,//基本类型，null表示任何类型都行
    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 value > 10  // 自定义验证函数
      }
    }
  }
})

注意：props会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如data、computed 或 methods 等实例属性还无法使用。

自定义事件
子组件通过自定义事件跟父组件通信。
5.1 使用v-on绑定自定义事件
每个Vue实例都实现了事件接口，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。
注意：不能用 $on 侦听子组件释放的事件，而必须在模板里直接用 v-on 绑定。例如：


Vue.component('child',{
  template: '',
  data: function(){
    return {
      number : 0
    },
    method : {
      increment: function(){
        this.number++
        $.emit(add)
      }
    }
  }
})

new Vue({
  el: '#app',
  data: {
    count  : 0
  },
  methods: {
    addcount: function(){
      this.count++
    }
  }
})

以上代码表示，点击子组件按钮时候，会触发父组件的addcount() 事件
5.2 .sync修饰符
.sync作为一个编译语法糖存在，他会被扩展为一个自动更新父组件属性的v-on侦听器，如：

扩展为：

当组件需要需要更新foo的值时，它需要显示地触发一个更新事件：
this.$emit('update:foo'，newValue)
5.3 非父子组件通信
有时候两个组件也需要通信（非父子关系），简单的场景下，可以使用一个空的Vue实例作为中央事件总线：
var bus = new Vue()
bus.$emit('id-selected',1) //触发组件A中的事件
bus.$on('id-selected',function(id){})//在组件B创建的钩子中监听事件
注意：复杂情况下，应该考虑专门的状态管理模式

使用插槽分发内容
为了让组件可以结合，我们需要一种方式来混合组租间的内容与子组件自己的模板，这个过程被称为内容分发，Vue使用作为原始内容的插槽。如下：

//app-layout 组件模板如下

  
     //具名插槽
  
  
     //默认插槽

//父组件模板：

  这里可能是一个页面标题
  主要内容的一个段落。
  另一个主要段落。
  这里有一些联系信息

渲染结果为：

  
    这里可能是一个页面标题
  
  
    主要内容的一个段落。
    另一个主要段落。
  
  
    这里有一些联系信息

6.1 编译作用域
分发内容实在父作用域内编译。
6.2 作用域插槽
作用域插槽是一种特殊类型的插槽，用作一个替换已渲染元素的 (能被传递数据的) 可重用模板。
在子组件中，只需将数据传递到插槽，就像你将 props 传递给组件一样：

在父级中，具有特殊属性 scope 的

Vue(篇幅二)

5. 组件

这里可能是一个页面标题

你可能感兴趣的:(Vue(篇幅二))