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

Question

我正在尝试将名称从数据传递到我的settingTemplate。然而，我没能让它发挥作用。谁能建议我应该如何处理这个问题？我是 Vue 新手。

app.js

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

setting-template.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']
}

Answer 1

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

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

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

data 是组件私有(private)数据 - 它不会传递给子组件。如果您的主组件数据中仍然需要 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