苏秦陶侃博客

vue

字数统计: 1.2k阅读时长: 4 min
2019/01/04 Share

vue

vue字符串模板和HTML模板

HTML模板

1
2
3
4
5
6
// 定义
Vue.component('child', {
// 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
1
2
3
// 使用
<!-- 在 HTML 中使用kebab-case -->
<child my-message="hello!"></child>

html模板概念

通过template:定义的组件。

写法：

要求不能使用驼峰命名，必须使用中划线命名；

原因：

HTML不区分大小写，使用HTML模板的组件会在浏览器初始加载的时候就被渲染，所以需要遵守HTML规则，否则将渲染失败，而Vue需要等到初次渲染完毕后才能拿到DOM，进行DOM的模板插入。

vue中data为函数的原因

因为正常情况下data需要的是一个对象，但是对象是引用类型的，如果有超过一个组件实例，那么改变一个的数据就会引发连锁效应，所以这里vue很聪明的把data定义为一个函数，利用这个函数返回新的对象，每个对象就是独立的。

vue、react方法写法

由于es6的箭头函数在定义的时候就已经决定了this指向，在组件内定义方法的时候this是指向window的，所以需要使用es5进行方法定义，这样就可以在使用的时候动态指向this。react中的话可以可以在constructor中绑定this。

vue中组件中所有方法中的this都被绑定到他自身的实例了。。

vue中两种组件注册方式

全局注册

为什么vue中注册全局组件要放在实例化之前

简单来理解：vue你可以理解为一个对象模板，使用vue就需要new进行实例化，当你已经实例化了，再去改变模板有何意义？自然出不来

深层原理：vue本质上就是使用Vue构造函数实例化一个对象，对象内部会去处理所有的模板以及数据，在实例化完毕之后再去改变构造函数，还想让之前实例化的对象中拥有新添加的东西那肯定是不行的。

1
2
3
4
5
6
7
8
9
10
ex:
	function Person(name) {
    	this.name=name
    }
    Person.prototype.isMan='no'
    person = new Person('Jack')
    // Person {name: "Jack"}
    
    // 实例化之后再去修改原型就对之前的person实例无效了。。
    Person.prototype.getName = function () {console.log(this.name)}

vue中is

就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签，这时候就要用is代替一下，让html语法符合规则验证。is属于指定要在内部使用的标签。

vue中v-model原理，input事件

vue自定义事件

铺垫—组件通信

父子组件自定义事件：父组件通过v-on绑定事件a，子组件中通过this.$emit(name[,args])触发。

非父子组件通过定义一个中央事件总线eventBus，在组件A中通过eventBus.$on(name,callback)绑定，在组件B中通过eventBus.$emit(name[,args])触发

1
2
3
4
5
6
7
8
9
var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

一、不传参

直接通过this.$emit或者eventBus.$emit触发

二、传参

监听自定义事件的时候已经传入参数

1
2
// 父组件 监听自定义事件的时候已经传入了id这个字段
<rowView @showInfo="showInfo(item.id)"></rowView>
1
2
3
4
// 子组件
show_info(arg) {
// 向详情页传入当前状态 this.$emit("showInfo",this.rowData.status_text);
    },

这里父组件要能接收到子组件传入的其他参数有这么几种办法：

  1. 第一种方式只适合触发事件时候传入一个参数的情况：@showInfo="showInfo(item.id,$event)">，父组件中添加$event参数，这样父组件事件触发时候第二个参数就能接收到子组件触发传来的数据。

$event

在dom原生事件中传入$event时候会被赋值为原生事件对象。

在自定义事件中传入$event时候会被赋予触发时传入的第一个参数值

  1. 通过arguments来获取其他数据，在父组件中@showInfo="showInfo(item.id,arguments)">

  2. 不在监听的时候传入数据，统一数据传入都写在方法中

    1
    2
    3
    4
    5
    6
    7
    //父组件
    <rowView @showInfo="showInfo"></rowView>
    showInfo(arg) {
        // 将id的处理写在方法内部
        this.id = this.item.id
        this.aaa = arg
    }
1
2
3
4
// 子组件
show_info(arg) {
// 向详情页传入当前状态 this.$emit("showInfo",this.rowData.status_text);
    },

Todo:根据arguments看一下vue的监听触发源码

原文作者：zhanghy7

原文链接：http://zhanghy7.github.io/2019/01/04/vue之自定义事件和参数$event/

发表日期：January 4th 2019, 9:19:35 pm

更新日期：January 14th 2019, 6:18:55 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. vue
    1. 1.1. vue字符串模板和HTML模板
      1. 1.1.1. HTML模板
        1. 1.1.1.1. html模板概念
        2. 1.1.1.2. 写法：
        3. 1.1.1.3. 原因：
    2. 1.2. vue中data为函数的原因
    3. 1.3. vue、react方法写法
    4. 1.4. vue中两种组件注册方式
      1. 1.4.1. 全局注册
    5. 1.5. 为什么vue中注册全局组件要放在实例化之前
    6. 1.6. vue中is
    7. 1.7. vue中v-model原理，input事件
    8. 1.8. vue自定义事件
      1. 1.8.1. 铺垫—组件通信
      2. 1.8.2. 一、不传参
      3. 1.8.3. 二、传参
        1. 1.8.3.1. 监听自定义事件的时候已经传入参数
Total : 43
2019
2018
问题 http js mysql tools English 计算机基础 git 问题及解决
shell css javaScript javaScript/es6 hybrid js vue tools react css基础 react/ssr 宏观架构