Vue.js 在组件中显示字符串

我正在努力学习Vue.js，并且正在玩。我正在尝试对其进行一些修改，以便单击的按钮可以向组件提供数据（我对这一点非常陌生，因此我的术语可能不适用）

我已将应用程序更新为：

// start app
var app = new Vue({
  el: '#app',
  data: {
    showModal: false,
    title: 'Default Title'
  },
  methods: {
    modalInit: function(title) {
      //this.title = title;
      this.showModal = true;
    }
  }
})

更新主要是为了使我可以根据单击的按钮更改模式中的标题，以下是对按钮的更新：

<button id="show-modal"@click="modalInit('A title')">Show Modal</button>

在这种状态下，模态将正常打开，但标题不在那里，我得到控制台错误：

[Vue warn]：属性或方法“title”未在实例上定义，而是在渲染期间引用。确保在数据选项中声明被动数据属性。

我无法正确地“在数据选项中声明被动数据属性”

---

谢谢

您已经为根组件指定了一个

title

属性。但是，模态组件没有

标题

属性。添加如下内容：

Vue.component('modal', {
  template: '#modal-template',
  data() {
    return {
      title: "Default Title"
    }
  }
})

---

如果要为

标题

传递动态值，请将其改为属性：

Vue.component('modal', {
  template: '#modal-template',
  props: ['title']
})

然后，可以在组件标记中传递标题的值：

<modal :title="dynamicTitle"></modal>

啊，好的。这回答了问题，但我想我还需要问如何从按钮动态更新，如果需要，我将深入研究并问另一个问题。@ChrisRockwell查看我的编辑。您可以将标题设置为模态组件上的道具，并在父级传递属性值。谢谢。知道这一点很好，但我不确定这是否是我所需要的（很抱歉，我对它的了解不够，无法提出正确的问题）…想象一个按钮列表，每个按钮打开相同的模式，但模式的内容因按下的按钮而异。因此，触发元素负责设置，例如

标题

。尽管如此，你还是回答了我的问题：D@ChrisRockwell也许这会有帮助。这是使用而不是道具。

Vue.component('modal', {
  template: '#modal-template',
  props: ['title']
})

<modal :title="dynamicTitle"></modal>