Vue 1.0 >> 2.0

记录vue认识过程中1.0到2.0不同

  • v-el v-ref >> ref
    2.0中v-el和v-ref被废除,ref属性代替
    ref is used to register a reference to an element or a child component.The reference will be registered under the parent component’s $refs object. If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be component instance:
<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>

<!-- vm.$refs.child will be the child comp instance -->
<child-comp ref="child"></child-comp>

this.$refs.p
this.$refs.child

  • 2.0中去掉了events实例属性和$dispatch,$broadcast事件绑定
    • 1.0 组件通信方式
      子组件
      this.$dispatch('eventName', 'hello')
      
      父组件
       event:{
       'eventName':function(msg) {
           console.log(msg)
         }
       }
      
    • 2.0中可以通过一个空vue对象实现一个事件处理器
      main.vue
      new Vue({
        el: '#main',
        data () {
          return {
            eventsHub: new Vue()
           }
        },
        router: router,
        render: h => h(App)
      })
      
      子组件
      this.$root.eventsHub.$emit('eventName','hello')
      
      父组件
      created () {
        this.$root.eventsHub.$on('eventName',(msg) => {
          console.log(msg)
        })
      }
      
      https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容