javascript - 无法将数据传递到vue模板

我试图将名称从数据传递到我的settingTemplate。
但是，我无法使其工作。谁能建议我该如何处理？我是Vue的新手。

app.js

var app = new Vue({
    el: '#app',
    components: {
        settingTemplate
    },
    data: {
        name: 'Elon'
    }
})

设置模板.js

const settingTemplate = {
template:
 `<div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-btn id="popoverButton-disable" variant="primary"></b-btn>
    </div>
    <div class="p-2">
      <b-popover :disabled.sync="disabled" target="popoverButton-disable" title="{{name}}">
        <a>Profile</a> | <a>Logout</a>
      </b-popover>
    </div>
  </div>`
  ,
    data() {
      return {
        disabled: false
      }
    },
    methods: {
       disableByRef() {
           if (this.disabled){
               this.$refs.popover.$emit('enable')
           }else{
               this.$refs.popover.$emit('disable')
           }
       }
    },
    props: ['name']
}

最佳答案

您应该通过属性而不是通过数据将name传递给组件：

<div id="app">
  <setting-template name="Elon" />
</div>

在这里您可以查看工作示例：
https://codepen.io/anon/pen/dwrOqY?editors=1111

data是组件专用数据-不会传递给子组件。
如果在主要组件数据中仍然需要name，则可以将其传递给子组件，如下所示：

<div id="app">
  <setting-template :name="name" />
</div>

var app = new Vue({
    el: '#app',
    components: {
        settingTemplate
    },
    data: {
      name: 'Leon'
    }
})

https://codepen.io/anon/pen/qLvqeO?editors=1111