Vue--数据传输

2024年5月26日 200次阅读 来源: 米花儿团儿

本文需要对Vue有一定的基础，可以通过查看文档初步了解，以下是自己对数据绑定的总结：

Vue.js 模板都是可解析的有效的 HTML，从根本上不同于基于字符串的模板；

插值：

{{绑定表达式}}

指令：

带有前缀v-的特性；——参数，用冒号’:’隔开；—修饰符，用’.’分割；

值为 绑定表达式；

//职责一：给DOM特性绑定表达式；
        --------v-bind
        --------参数为DOM特性；
        ---使用指令绑定样式会自动添加前缀；
        
//职责一：当其表达式的值改变时，把某些特殊的行为应用到DOM上；
    ---无参数
    ---条件指令
    
//职责二：监听事件
    ---参数为事件类型；
    ---值为方法名；
    ---v-on 提供两个 事件修饰符：.prevent 与 .stop

过滤器：

添加到表达式的后面，用管道符’|’隔开；

//职责：将表达式的值管输到过滤器中进行处理并发挥处理结果；
始终以表达式的值为第一个参数；

计算属性：

当一个数据依赖于其他数据时；

 computed: {
  数据键名: {
    get: function () {
      return 表达式
    },
    set: function (newValue) {
        
    }
  }
}

通过组件绑定数据——-父与子之间的通信

子组件用props来定义如何接收外部（父组件）数据；——–父传子

//子组件需要显示地用props选项声明props；------格式类似于data
//prop默认是单向绑定的；
//通过修饰符.sync显示强制双向绑定或修饰符.once强制单次绑定；

子组件用自定义事件来向外（父组件）传递消息；———-子传父

//不同于 DOM 事件，Vue 事件在冒泡过程中第一次触发回调之后自动停止冒泡，除非回调明确返回 true

使用 $dispatch('eventName',this.msg) 派发事件，事件沿着父链冒泡；
父组件通过<child v-on:event-name='handleIt'></child>handleIt方法处理数据；

子组件用<slot>来将外部（父组件）动态传入的内容（其它组件或是HTML）和自身模板进行组合；————父传子

//命令slot
父组件中显示地声明slot特性赋予值-----作为子组件slot标签的name特性的值；
子组件中命名slot匹配对应的slot特性的内容片段，未命名的slot作为父组件找不到匹配的内容挂载点；
---如果没有未命名slot，不匹配内容将被抛弃；
    原文作者：米花儿团儿
    原文地址: https://segmentfault.com/a/1190000005004047
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞