.native事件修饰符

作用
    在父组件中给子组件绑定一个原生的事件,也就是吧子组件变成了普通的HTML

使用代码

父组件
<template>
  <div>
     <p @click="click" >点我</p>
      <Native @click.native="click"/>
      <hr/>
      <Native @click="click"/>
  </div>
</template>

<script>
import Native from '@/Native.vue'
export default {
  components: { Native },
    methods: {
      click () {
        console.log('触发了')
      }
    }
}

子组件
<template>
  <div>
      <!-- 事件修饰符 -->
      <!-- .native事件修饰符是用来是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签看待 -->
    <div>
      子组件
    </div>
  </div>
</template>

直接看效果

.sync事件修饰符

作用
    实现父子组件数据之间的双向绑定，与v-model类似
区别
    一个组件上只能有一个v-model,但是可以有多个.sync修饰符
原理
    和v-model一样 ==  v-model本质就是语法糖,它总共做了两件事 , 
        第一件事给 input 绑定了一个 value 属性
        第二件事给 input 绑定了input事件 事件触发时将绑定的变量重新赋值
v-model和.sync的区别 
    共同点 : 都是语法糖,可以实现父子组件中的数据的双向通信
    不同点 : 
      v-moderl : 
        1.父组件 v-model="" 子组件 @(input,value)
        2.一个组件只能绑定`一个`v-model
        3.v-model针对更多的是最终操作结果，是`双向绑定的结果`，是`value`，是一种`change操作
      .sync：
        1.父组件 :my-prop-name.sync 子组件@update:my-prop-name 的模式来替代事件触发，实现父子组件间的双向绑定。 
        2.一个组件可以`多个`属性用.sync修饰符，可以同时"双向绑定多个“prop”
        3..sync针对更多的是各种各样的状态，是`状态的互相传递`，是`status`，是一种`update操作`。

代码

父组件
<template>
   <div class="department-container">
    <div class="app-container">
        <MyComSync :a.sync="num"  :age.sync="age"/>
        <!-- <MyCom v-model="num" /> -->
        <MyCom :value="num" @input="val=>num=val" />
    </div>
  </div>
</template>

<script>
import MyCom  from "./Native.vue";
import MyComSync   from './native副本.vue';
export default {
  data(){
    return { num: 100, age: 18 }
  },
  components: { MyCom, MyComSync },
  methods: {
    click1 () {
      console.log('click1')
    }
  }
}
</script>

字组件1
<template>
  <div>
    我是子组件, {{value}}
    <button @click="$emit('input', value+1) "> +1</button>
  </div>
</template>
<script>
export default {
  // 如何在子组件内部，拿到父组件传递数据?
  props:['value']
}
</script>

子组件2
<template>
  <div>
    我是子组件-sync, {{a}}, {{age}}
    <button @click="$emit('update:a', 200) "> 200</button>
    <button @click="$emit('update:age',20)">age变成20</button>
  </div>
</template>

<script>
export default {
  // 如何在子组件内部，拿到父组件传递数据?
  props:['a', 'age']
}
</script>

效果