如何从Vue实例修改组件的Prop值并在组件内使用title

兄弟，我懂你想在Vue实例里调整组件的prop，让组件能用上最新的title值。不过得先敲黑板记住Vue的核心规则：prop是单向数据流——父组件（这里就是你的Vue实例）负责把数据传给子组件，子组件只能读取使用，不能直接修改prop本身。所以正确的操作姿势是在实例里维护title的数据源，通过绑定prop传递给组件，之后在实例里修改这个数据源，组件自然就能同步拿到更新后的title了。

步骤1：定义子组件并声明接收title prop #

先把你的子组件定义好，明确它要接收title这个prop：

Vue.component('my-component', {
  // 声明接收title prop
  props: ['title'],
  template: '<h2>{{ title }}</h2>'
});

这里子组件通过props选项告诉Vue：我要接收一个叫title的参数，之后就能在模板或逻辑里直接用this.title访问它了。

步骤2：在Vue实例中维护数据并绑定到组件prop #

接下来在你的Vue实例里，定义一个用来控制title的数据源，然后用v-bind（简写:）把这个数据源绑定到组件的title prop上：

new Vue({
  el: '#app',
  data: {
    // 实例里维护的title数据源
    currentTitle: '初始默认标题'
  },
  methods: {
    // 实例里的方法，用来修改title值
    changeTitle() {
      this.currentTitle = '我是更新后的新标题！';
    }
  }
});

对应的HTML模板：

<div id="app">
  <!-- 把实例的currentTitle绑定到组件的title prop -->
  <my-component :title="currentTitle"></my-component>
  <!-- 点击按钮触发实例里的方法修改title -->
  <button @click="changeTitle">点击更新标题</button>
</div>

这样一来，当你点击按钮调用changeTitle方法时，实例里的currentTitle会更新，组件的title prop也会自动同步，组件内部就能用上最新的title值了。

额外补充：如果组件需要主动修改title怎么办？ #

如果你的场景是组件内部需要触发title的修改，那也不能直接改prop，得通过触发事件通知父组件（也就是你的Vue实例）来修改数据源。举个例子：

Vue.component('my-component', {
  props: ['title'],
  template: `
    <div>
      <h2>{{ title }}</h2>
      <button @click="requestUpdateTitle">组件内请求更新标题</button>
    </div>
  `,
  methods: {
    requestUpdateTitle() {
      // 触发一个自定义事件，把新的title值传出去
      this.$emit('update-title', '组件发起的新标题');
    }
  }
});

然后在实例的模板里监听这个自定义事件，更新数据源：

<div id="app">
  <my-component 
    :title="currentTitle" 
    @update-title="currentTitle = $event"
  ></my-component>
</div>

这种方式完全符合Vue的单向数据流设计，能避免数据流混乱，调试起来也更清晰。

内容的提问来源于stack exchange，提问作者tigerel