VUE基础整理

在路上等

已于 2023-09-16 17:21:27 修改

阅读量247

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2020-09-17 14:52:44 首次发布

本文链接：https://blog.csdn.net/weixin_42327537/article/details/108643098

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一.watch: 监听form的bankCardNo

demo:
 'form.bankCardNo':{
     handler(newValue,oldValue) {
      console.log(newValue,oldValue)
      },
      //  deep: true
    }

二.组件传值
预习知识点:

使用组件的3部曲
1.引入 import PointList from ‘./component/PointList.vue’
2.注册 components:{ PointList },
3.使用：传参 @事件

1.在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。
2.每个Vue实例都实现了事件接口：使用 $o n (e v n tN am e) 监听事件；使用$ emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

1.父传子
1). 做一个子组件(可以注册在路由可以不注册),并在父组件中使用子组件 :demo(要穿的值,在组件的data中接收)
2).通过事件触发先获取子组件的数据
例:

使用子组件
  <PointList :viewsop="viewsop" @childFn='parentFn'></PointList>
子组件接收数据：
   props:{
     viewsop:{
           type:Boolean
     },
     formConfig: {
            type: Array,
            required: true
     }
  },
 this.$emit('childFn', this.message);
 在父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。
     例:   	parentFn(payload) {   this.message = payload}

2.跨组件传值
1）创建bus文件
2）在要接收值的组件(List.vue)： eventBus. $o n (^{'} 事件名^{'} ，函数体) 3 ）在要传递值的组件： e v e n tB u s .$ emit(‘事件名’，值)

import Vue from 'vue'
// 导出空白vue对象
export default new Vue()

 created() {
    eventBus.$on("send", (index, price) => {
     
    });
  },

methods: {
    subFn(){
      eventBus.$emit("send", this.index, 1) // 跨组件
    }
  }