1, 介绍

vue最强大的功能, 可以扩展html元素, 封装可充用的代码

在较高的层面, 组件是自定义元素, vue的编译器为他添加特殊功能, 在有些情况下, 组件也可以表现为用 ls 特性进行扩展了html元素

所有的vue组件同时也都是vue的实例, 所以可接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期的钩子

2, 单文件组件

1), template

2), script

3), style

3部分组成

3, 子父级组件

1), 使用

父组件中接受

然后引用

2, 子父组件通讯

父 -> 子  传递数据

子 -> 父  相应事件

1), 父到子

使用props 进行传递

使用 v-bind进行传递, 可简写为  : 的形式

父类中

data() {
     return {
       msg: "传递给子的数据",     lifemsg: "hello",     num: 10,     obj: {
         name: 'vini',       age: 18     }   } },

可传递动态数据, 通过v-mode绑定

                 
           button ..

 

子类中接受

使用props 进行接受

1), 可限定类型, 可同时限制多个类型

2), 可设置默认值

3), 可设置必须

4), 返回为对象形式的话, 必须用function-return的形式

props: {      // 增加必须项      title: {        type: String,        required: true,      },      // 支持多种类型      lifemsg: [String, Number],      // 带有默认值      num: {        type: Number,        default: 5,      },      // obj 接收      obj: {        type: Object,        default: function () {          return {            name: 'lisa',            age: 27          }        }      }    }

 2), 子到父数据传递

需要 @click 并且以函数的形式传递

子中进行绑定和传递, 使用emit传递给父

父中进行接受, 也以 函数 的形式进行接受

methods: {
     getMsg(data) {
       this.msg = data;   } }

2), 父中的数据传递给子, 子计算后返回给父

         
     
      
            
      
 {
   { result }}
    
     

script: 

data() {      return {        result: 10,      }    },    computed: {      getNum() {        return this.result - 0;      }    },    methods: {
          sendAndGet(data) {        console.log("..." + data)        this.result = data;      }    }

子中: 

     
        
              
       计算数据       
     

// 绑定emit, 返回给父      methods: {
            sendAndCompute(event) {          this.$emit("sendAndCompute", this.computeNum)        }      },      // 接受来自父的数据      props: {          num: {            type: Number,            required: true,          }      },      // 计算      computed: {        computeNum() {          return this.num * 3        }      }