Skip to content
This repository has been archived by the owner on May 3, 2018. It is now read-only.

Can I use a compoent inherit other compoent? #354

Closed
froyo-naux opened this issue Aug 20, 2015 · 5 comments
Closed

Can I use a compoent inherit other compoent? #354

froyo-naux opened this issue Aug 20, 2015 · 5 comments

Comments

@froyo-naux
Copy link

Q1:
Vue.extend create a component construct of Vue, override it by pass data or $el to params
Vue.Component register a component
But
How to do component inherit other?is it necessary?
For Example:
TableGrid, TreeGrid inherit Grid

Q2:
a component from vue.extend. register it by Vue.Component('my-component', Vue.extend({}))
how to use this in Father Compoent?

var Father  = new Vue({
//...
    components: {
          //how put it here?
     }
//...

})
@froyo-naux froyo-naux changed the title 组件复用使用的疑问 Can I use a compoent inherit other compoent? Aug 20, 2015
@froyo-naux
Copy link
Author

@yyx990803 耽误一小会时间,帮我解个惑吧
Vue.extend的组件,要么new ,要么Vue.Component进行全局注册然后标签引用,不能放在父组件的components属性中?

@yyx990803
Copy link
Member

  1. You can do TableGrid.extend, but it's not recommended. Prefer composition over inheritance. (use mixins)
  2. Just pass it in like this:
components: {
  'table-grid': TableGrid
}

The key table-grid here is the tag name you will use in the parent template.

@froyo-naux
Copy link
Author

Thx

@KKSzymanowski
Copy link

@evan, why is inheritance not recommended? How would you go about using methods of parent component? You wrote in the documentation that we should not rely on this.$parent or this.$children chain and instead pass necessary data through props. For example I have a modal(sort of like the bootstrap one) component and I want to use eg. close() method in a custom modal(derived component)

@simplesmiler
Copy link
Member

@KKSzymanowski

Re: inheritance. It looks like you have confused two things. There's an object oriented inheritance (extending a component from another component), and there's the view hierarchy. this.$parent and this.$children are about the second one.

Re: method on parent component. If you don't need the result, then this.$emit('signal', a, b, ...) in the child and <child @signal="handleSignal"> with handleSignal: function(a, b, ...) { ... } in the parent. If you need a result, then pass the method as a prop. If you need to call a child method from the parent, then <child v-ref:child-vm> and this.$refs.childVm.method() (or find the child reference inside of this.$children instead of using v-ref).


Also, vuejs/Discussion is deprecated, you can find support in the gitter chat or on the forum.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants