Vue-组件1

组件的两种使用方法
使用props传递数据
单向数据流
组件中的命名方式
数据验证

Vue中的组件

组件是可复用的Vue实例
命名组件推荐使用小写字母，用-连接
在组件定义中，除了template，其它选项还有：data，methods，computed
组件定义中的data必须是一个方法

组件的两种使用方法

全局注册

<my-component></my-component>

Vue.component('my-component',{
   template: '<div>组件内容</div>'
})

局部注册

var app = new Vue({
   el:'#app',
   components:{
       ''my-components:{
            template:'<div>组件内容</div>'
        }
     }  
})

使用props传递数据

这边的props采用数组方式

父组件向子组件传递数据

v-bin动态绑定父组件传的内容

<div id="app" style="width:300px;height:200px;border:2px solid skyblue">
  <child-component msg="我是父组件的内容"></child-component>
  <hr>
 <!--  v-bind进行动态数据动态绑定 将input中的sth传给子组件 -->
  <input type="text" v-model="dadmsg">
  <bind-component :sth="dadmsg"></bind-component>
</div>

var app = new Vue({
  el: '#app',
  data: {
    dadmsg: 'happy'
  },
  components: {
    'child-component': {
      props: ['msg'],
      template: '<div>{{msg}}</div>'
    },
    'bind-component': {
      props: ['sth'],
      template: '<div>{{sth}}</div>'
    }
  }
})

在组件中使用props来从父组件接收参数，在props中的属性，都可以在组件中直接使用。

单向数据流

概念理解：通过props传递数据是单向的，父组件变化时数据会传给子组件，但是反过来不行。

目的：是将父子组件解稿，避免子组件修改无意间修改了父组件的状态。

扫描二维码关注公众号，回复： 7127207 查看本文章

两种改变prop的情况的应用场景

父组件传递初始值，子组件可以将它作为初始值保存起来，在自己的作用域下可以随意进行修改;
将传递进来的数据作为初始值进行保存

注册组件
将父组件的数据传递进来，并在子组件中props接收
将传递进来的数据通过初始值保存起来

<div id='app'>
  <child-component msg='今天也要努力啊'></child-component>
</div>

let app = new Vue({
  el: '#app',
  components: {
    'child-component': {
      props: ['msg'],
      template: '<div>{{count}}</div>',
      data() {
        return {
          count: this.msg
        }
      }
    }
  }
})

prop作为需要被转变的原始值传入，用计算属性对其再次进行计算

注册组件
将父组件的数据传递进来，并在子组件中使用props接收
将传递进来的数据通过计算属性进行重新计算并渲染到页面

<div id="app">
  <input type="text" v-model="width">
  <width-component :width='width'></width-component>
</div>

let app = new Vue({
  el: "#app",
  data: {
    width: 0
  },
  components: {
    'width-component': {
      props: ['width'],
      template: '<div :style="style"></div>',
      computed: {
        style() {
          return {
            width: this.width + 'px',
            background: 'red',
            height: '30px'
          }
        }
      }
    }
  }
})

组件中的命名方式

camelCased (驼峰式)

kebabcase（短横线命名）

组件中的html中、父组件给子组件传递数据，必须使用短横线命名。 （a-bc √ aBc ×）
在props中，短横线命名和驼峰命名都可以。
在template中，必须使用驼峰命名，短横线会报错。
在data中，使用this.xxx时，必须使用驼峰命名，短横线会报错。
组件的命名，短横线命名和驼峰命名都可以。

数据验证

这边的props采用对象方式

可验证的类型：Number String Boolean Array Object Function 自定义

<div id="app">
  <style-component :a='a' :b='b' :c='c' :d='d' :e='e' :g='g'></style-component>
</div>

let app = new Vue({
  el: '#app',
  data: {
    a: 1,
    b: '2',
    c: '', //空字符串，就取默认的true
    d: [111, 222, 333],
    e: console.log(),
    g: 3
  },
  components: {
    'styleComponent': {
      props: {
        //数字类型
        a: {
          type: Number,
          required: true //必传
        },
        //字符串类型
        b: {
          type: [String, Number]
        },
        //布尔类型
        c: {
          type: Boolean,
          default: true //默认值
        },
        //数组或对象  默认值是函数形式返回
        d: {
          type: Array,
          default: function() {
            return []
          }
        },
        //函数类型
        e: {
          type: Function
        },
        //自定义一个函数
        g: {
          validator: function(value) {
            return value < 10
          }
        }

      },
      template: '<div>{{a}}--{{b}}--{{c}}--{{d}}--{{g}}</div>'
    }
  }
})