Skip to content
This repository has been archived by the owner. It is now read-only.

Can I use a compoent inherit other compoent? #354

Closed
NauxChen opened this issue Aug 20, 2015 · 5 comments
Closed

Can I use a compoent inherit other compoent? #354

NauxChen opened this issue Aug 20, 2015 · 5 comments

Comments

@NauxChen
Copy link

@NauxChen NauxChen commented Aug 20, 2015

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?
     }
//...

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

@NauxChen NauxChen commented Aug 20, 2015

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

@yyx990803
Copy link
Member

@yyx990803 yyx990803 commented Aug 20, 2015

  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.

@NauxChen
Copy link
Author

@NauxChen NauxChen commented Aug 21, 2015

Thx

@NauxChen NauxChen closed this Aug 21, 2015
@KKSzymanowski
Copy link

@KKSzymanowski KKSzymanowski commented Apr 6, 2016

@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

@simplesmiler simplesmiler commented Apr 6, 2016

@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.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.