vue-04-组件

Posted 2021-01-10 wenbronk

1, 介绍

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

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

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

2, 单文件组件

1), template

2), script

3), style

3部分组成

3, 子父级组件

1), 使用

<template>
    <div>
      <p > 这儿是 子组件 </p>
    </div>
</template>

<script>
    export default {
        name: "b02_son"
    }
</script>

<style scoped>

</style>

父组件中接受

<script>
// 导入子组件
import b02_son from ‘./b02_son‘

  // 必须导出， 外部才可以访问
  export default {
    name: "b01_component",
    components: {
      b02_son
    }
  }
</script>

然后引用

 <div>
      <!--导入子组件-->
      <b02_son/>
    </div>

2, 子父组件通讯

父 -> 子  传递数据

子 -> 父  相应事件

1), 父到子

使用props 进行传递

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

父类中

<b02_son :title="msg" :lifemsg="lifemsg" :num="num" :obj="obj"/>

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

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

<!--导入子组件-->
      <input type="text" v-model.lazy="lifemsg">

      <b02_son :title="msg" :lifemsg="lifemsg" :num="num" :obj="obj"/>
      <button @click="changeMsg">button ..</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传递给父

<template>
    <div>
      <div>
        子给父传递数据
      </div>

      <div>
        <button @click="sendMsg">传递数据</button>
      </div>

    </div>
</template>

<script>
    export default {
        name: "b03_emit",
      data() {
          return {
            msg: "子组件数据",
          }
      },
      // 绑定emit
      methods: {
          sendMsg(event) {
            // key， value
            this.$emit("sendMsg", this.msg)
          }
      }
    }
</script>

<style scoped>

</style>

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

<!--子给父传递数据-->
    <div>
      <b03_emit @sendMsg="getMsg"/>


    </div>

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

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

<!--子给父传递数据-->
    <div>
      <b03_emit @sendAndCompute="sendAndGet" :num="getNum" />
      <p> {{ result }}</p>
    </div>

script: 

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

子中: 

 <div>
        <!--<button @click="sendMsg">传递数据</button>-->
        <button @click="sendAndCompute"> 计算数据 </button>
      </div>

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