Question

如果我的组件的渲染不止一次，我正在尝试更改它的prop。默认情况下，第一个道具将具有固定值，但是组件的第二次调用将从父级的父项获取它的道具。在我的示例中，来自App.vue的值不会更改进入myBox.vue的属性这是我的link

App.vue

<template>
  <div id="app">
    {{years}}
    <myBox :years="years"/>
    <button @click="changeProp">Change prop</button>
  </div>
</template>

<script>
import myBox from "./components/myBox";

export default {
  name: "App",
  components: {
    myBox
  },
  data() {
    return {
      years: ""
    };
  },
  methods: {
    changeProp() {
      this.years = 100;
    }
  }
};
</script>

mySelect.vue

<template>
  <div class="select">
    <select>
      {{years}}
      <option v-for=" (i, index) in years" :key="index">{{i}}</option>
    </select>
  </div>
</template>

<script>
import myBox from "./myBox";
export default {
  data() {
    return {};
  },
  components: {
    myBox
  },
  props: ["years"]
};
</script>

<style>
.select {
  width: 100px;
  height: 100px;
}
</style>

mySelect.vue

<template>
  <div class="box">
    <mySelect :years="24"/>
    <mySelect :years="24"/>
    <mySelect :years="24"/>
  </div>
</template>

<script>
import mySelect from "./mySelect.vue";
export default {
  data() {
    return {
      //years: [2000, 2001, 2002, 2003, 2004, 2005, 2006],
      value: 5
    };
  },
  components: {
    mySelect
  }
};
</script>

<style>
div.box {
  width: 100%;
  height: auto;
  background: lightblue;
}
</style>

当前，我的代码使用v-if动态生成第二和第三组件，并采用默认的props值，而我希望它从父级的父级获取。有可能吗？

从嵌套父级的父级组件更改prop

0 个答案: