native修饰符和sync

native

在组件上使用原生事件不生效,只要加上native就可以了

  <div id="app">
    <input type="text" @focus="fn1">
    <hr>
    <hello @focus.native="fn1"></hello>
  </div>

  <script src="./js/vue.js"></script>
  <script>
    Vue.component('hello', {
      template: `
        <input type="text" @focus="fn1" />
      `,

      methods: {
        fn1() {
          this.$emit('focus')
        }
      }
    })

    new Vue({
      el: '#app',

      methods: {
        fn1() {
          console.log(1111)
        }
      }
    })
  </script>

sync修饰符

<!-- 
    自定义事件只能使用 短横线或全小写


    sync修饰符，主要用户传递prop数据的时候，子组件要修改这个prop的一种语法糖
   -->

  <div id="app">
    <!-- <hello :name="username" @update:name="username = $event"></hello> -->
//sync的作用是简化子组件自身想改变自身的数据
    <hello :name.sync="username"></hello>
  </div>

  <script src="./js/vue.js"></script>
  <script>
    Vue.component('hello', {
      props: {
        name: String
      },
      
      template: `
        <div>
          <h1>Hello</h1>
          {{ name }}

          <button @click="fn1">点击，修改name</button>
        </div>
      `,

      methods: {
        fn1() {
  //在传输的时候一定要用'updata'
          this.$emit('update:name', '李四')
        }
      }
    })

    new Vue({
      el: '#app',

      data: {
        username: '张三'
      },

      methods: {
        
      }
    })