月度归档:2018年01月

Vue组件抛事件和Function prop的差别

1. emit event

child component

<template>
  <button @click="foo">Button</button>
</template>
<script>
export default {
  name: 'my-button',
  methods:{
    foo () {
      this.$emit('onClick')
    }
  }
}
</script>

parent component

<template>
  <my-button @onClick="handleClick"></my-button>
</template>
<script>
import myButton from '@/components/myButton'
export default {
  components: { myButton }
  methods: {
    handleClick () {
      console.log('boo')
    }
  }
}
</script>

2. props function

child component

<template>
  <button @click="onClick">Button</button>
</template>
<script>
export default {
  name: 'my-button',
  props: {
    onClick: {
      type: Function
    }
  }
}
</script>

parent component

<template>
  <my-button :onClick="handleClick"></my-button>
</template>
<script>
import myButton from '@/components/myButton'
export default {
  components: { myButton }
  methods: {
    handleClick () {
      console.log('boo')
    }
  }
}
</script>

3. 实验结果和理解

父组件不知道事件什么时候会发生,因为事件的监听和处理都在子组件

子组件不知道父组件在事件发生后干什么,因为干什么是执行的父组件里的method

子组件要求父组件提供一个Callback函数,当事件发生时子组件去回调父组件提供的Callback函数

两种方式的运行结果是一样的,写法上和理解上有差别。

  1. 在emit的情况下

    父组件能够监听到事件的发生,并且决定在事件发生时做什么

  2. 在props的情况下

    父组件不知道事件发生与否,只能指令子组件在发生时做什么处理

4. 可能的问题

  1. 是否存在父组件要对子组件产生的事件进行搜集并处理? 第二种方式可能就歇菜
  2. 第二种方式对传入的Function内部是无法校验的,不过第一种也只是回避,本来就不校验

Vue 事件参数传递

1. 问题

components

组件内部抛一个事件

onChange (value) {
  this.$emit('OnChange', value)
}

Page

外部使用时监听,并且执行一个回调

1.1 什么都不传

<tag @onChange="log"></tag>
<script>
  methods: {
    log (value) {
      console.log(value)
    }
  }
</script>

返回

value

1.2 传字符串

<tag @onChange="log('change')"></tag>
<script>
  methods: {
    log (value) {
      console.log(value)
    }
  }
</script>

返回

'change'

2. 期望达到的效果

既返回原始value,也返回字符串

'change' + value

3. 权宜之计

模板式写法无法做到,只能这样写

<tag @onChange="log"></tag>
<script>
methods: {
  log (value) {
    console.log ('change' +  value)
  }
}
</script>

使用函数式组件也许可以,还没有尝试

4. 换种方法

把onChange本身传递的value作为函数的参数向下传递

<tag @onChange="(value) => log('change'+value)"></tag>
<script>
methods: {
  log (value) {
    console.log (value)
  }
}
</script>

返回

'change' + value

Vue Data里面下划线命名无效并报错

使用下划线命名

data () {
  _checked: false
}

产生报错

[Vue warn]: Property or method "_check" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

原因

以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

具体参考:官方文档中的解释

解决方法

按规矩办事

data () {
  isChecked: false
}