Question

我正在尝试学习Vue.js，并正在玩modal component example。我尝试将其更改一点，以便点击的按钮可以向组件提供数据（我非常这是新的，所以我的术语可能已关闭）。

我已将应用更新为：

// 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>

x模板的相关部分：

<div class="modal-header">
  <h2>{{ title }}</h2>
</div>

不确定是否重要，但该组件是：

Vue.component('modal', {
  template: '#modal-template',
})

在这种状态下，模态会打开很好，但标题不会出现在我面前，我收到控制台错误：[Vue warn]: Property or method "title" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

我无法在数据选项中正确地宣布反应数据属性＆＃34;。

谢谢！

Answer 1

您已为根组件指定了title属性。但是，模态组件没有title属性。像这样添加：

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

如果您想传递title的动态值，请改为将其设为属性：

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

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

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

在组件中显示字符串

1 个答案: