Question

我知道通常所有组件都是全局编译的，并且是彼此的兄弟姐妹。但我想知道如何使用父组件的属性？例如：

＆＃13;

Vue.component('parent',{
  template: '#parent',
  props:['tab']
});

Vue.component('child',{
  template: '#child',
  props:['scope']
});

new Vue({
  el: 'body',
  data: function(){
   return {
     tab: "global"
   }
  }
});

＆＃13;

<parent tab="parent">
  <child slot="child" :scope="tab"></child>
</parent>

<template id="parent">
  <h1>Parent</h1>
  <slot name="child"></slot>
</template>
<template id="child">
  <p>Compiled in {{scope}}</p>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

＆＃13;

Answer 1

在这种情况下，我会使用子组件的本地注册。您可以在本地注册，而不是将其设置为全局：

// extend and register in one step
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// also works for local registration
var Parent = Vue.extend({
  components: {
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
})

您不必全局注册每个组件。通过将组件实例选项注册到
，可以使组件仅在另一个组件的范围内可用

http://vuejs.org/guide/components.html#Local-Registration

如何在Vue.js中将内部组件编译为子组件？

1 个答案: