vue手记

• 常用单词记录
• 关于vue中父子组件通信的几种方法对比
  • 通过props实现通信
  • 通过$ref 实现通信
  • prop和$ref之间的区别
• vue中@的作用
• 插槽使用
  • 默认插槽
  • 具名插槽
  • 作用域插槽
• 区分this. $route 和this $router 这两个对象
• 闲谈
  • v-bind:value不是双向绑定的
  • {{ message.split('').reverse().join('') }}
  • popup-picker之v-model绑定方法问题
  • 关于array[0]=obj和array.push的不同区别
  • template的v-show属性

常用单词记录

render
[?rend?(r)]
v.使变得;给予;提供;提交

re-render
重新渲染

patch
[p?t?]
v.打补丁;缝补;修补

teardown
n.拆卸

divider

[d??va?d?(r)]

分割线;

prototype

[?pr??t?ta?p]

n.原型;雏形;最初形态

promise

[?pr?m?s]

v.许诺;承诺;答应;保证;

n.许诺;承诺;

scheduler

[???dju?l?]

n.调度程序，日程安排程序

release

[r??li?s]

v.释放;放出;放走;放开;

n.释放;公开;发行;发布;

docker

[?d?k?(r)]

n.码头工人

daemon

英 [?di?m?n] 美 [?di?m?n]

n.守护进程；(古希腊神话中的)半神半人精灵

关于vue中父子组件通信的几种方法对比

组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。通过props、$ref和 $emit ，来讲解如何实现父子组件间通信。

通过props实现通信

（1）静态传递
子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

//父组件

//子组件

（2）动态传递
用 v-bind 来实现。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

通过$ref 实现通信

ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 \(refs 对象上。 通俗点说，就是通过ref注册的组件，可以通过this.refs.调用到子组件信息 通过\)ref可能获取到在子组件里定义的属性和方法。
ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

prop和$ref之间的区别

prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
\(ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。 通过\)emit 实现通信
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

vue中@的作用

import Vue form 'vue’的意思

1. import Vue form ‘vue’ 写全的话是import Vue from ‘…/nodemouls/vue/list/vue.js’； 此时在webpack.base.conf.js中进行了定义，内置了一些选项，extenions:[’.js’,’.vue’,’.json’],意思是省略后面的后缀，由webpack来自动为我们加上。

2. 如果名字比较长，还可以起个别名。
   alias:{ ‘@’:resolve(‘src’)},
   它的意思是在vue项目中，引入路径的时候使用@即代表src文件夹，省去了…/…/…/的操作，这样写比较十分方便。

3. 当我们在模板中写img的时候有时也需要翻着找，那么能用@代替吗？答案是当然可以的，
   比如在assets文件夹中有张图片，logo.png。以往写可能是：

现在知道怎么回事以后可以直接这样写：

现在知道怎么回事以后可以直接这样写：

//父组件

//子组件(slotOne1)

//父组件

//子组件

//父组件
//在父组件上使用slot-scope属性，user.data就是子组件传过来的值

//子组件
//在子组件的slot标签上绑定需要的值