vue 一些深入的技术

1. 使用.native 修饰符

<event @click='up' > </event>

如果此组件直接加 @click 是无法使用 @click 事件的

解决办法  使用.native修饰符   <event @click.native='up' > </event> 可以点击了 把自定义事件变为dom事件   获取的是最外面的跟标签

 

2. @chage和 @input的区别

  change是在外面点击一下 num值才会变化, 而input是在输入框里直接实时变化

 

$event.target.value 直接获取当前那输入的值

 3. v-model 实现父子组件的input框传递

父组件:

 

 

子组件:

 

 

 这样 子组件变  父组件也跟着变

 

4.sync 

也是父子组件的传递

 

5. $attrs  和  $listeners 

$attrs 可以获取父组件传过来的属性

对于子组件来说    $attrs获取所有的值 包括title,type size 等等

$listeners  可以让父组件实现单击事件

父组件

 

 

子组件

 

 

6. ref 和 $children 和 $parent

ref可以获取子组件的实例 然后进行响应式的数据变化     他可以获取dom节点 也可以获取子组件的数据和方法

 

找小红和小明借钱  爸爸加钱  小红,小明减钱 

---

 

$children可以获取子组件的数据和实例  

 

 借所有孩子的200块钱   爸爸加400

---

 

最后在子组件里 点击按钮  儿子减钱  给爸爸加钱  这就用到 $parent了

让父组件的钱增加

 

 

　8.mixin混入

就是相同的js 放到一起  不重复写了

 

9.作用域插槽

作用域插槽:子组件数据来源于父组件，但是子组件决定不了它的外观与结构