Vue-组件1

Posted 2022-09-07 bubu-sourire

• 组件的两种使用方法
• 使用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传递数据是单向的，父组件变化时数据会传给子组件，但是反过来不行。

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

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

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

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

<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作为需要被转变的原始值传入，用计算属性对其再次进行计算

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

<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 (驼峰式)

kebab­case（短横线命名）

• 组件中的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>‘
    
  
)