Javascript 无法将数据传递到vue模板

我正在尝试将名称从数据传递到我的设置模板。 然而，我一直无法使它工作。有谁能建议我该怎么做？我是Vue的新手

app.js

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

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']
}

设置template.js

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

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']
}

const设置模板={
模板：
`
配置文件|注销
`
,
数据（）{
返回{
禁用：false
}
},
方法：{
disableByRef（）{
如果（此项已禁用）{
此.$refs.popover.$emit（'enable'））
}否则{
此.$refs.popover.$emit（'disable'））
}
} 
},
道具：['name']
}

您应该通过属性而不是数据将

名称

传递给组件：

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

---

您应该通过属性而不是数据将

名称

传递给组件：

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

---

嗨，贝尼亚明，你的回答解决了我的问题。不过，我想问另一个答案。如何将数据（组件专用数据）传递给子组件？您需要分别传递每个属性，如：

谢谢！！你的回答对我很有帮助，而且数据：

{propsToPass:{a:'a'…}}

，但是单独回答要好得多。嗨，贝尼亚明，你的回答解决了我的问题。不过，我想问另一个答案。如何将数据（组件专用数据）传递给子组件？您需要分别传递每个属性，如：

谢谢！！你的回答对我很有帮助，而且数据：

{propsToPass:{a:'a'…}}

，但是分开做要好得多。