美文网首页
Vue 1.0 >> 2.0

Vue 1.0 >> 2.0

作者: w_nanan | 来源:发表于2018-02-07 13:29 被阅读13次

记录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

相关文章

网友评论

      本文标题:Vue 1.0 >> 2.0

      本文链接:https://www.haomeiwen.com/subject/nhiwixtx.html