Question

我有什么：父母和孩子两个组成部分。

父母

<UserName :name=user.name></UserName>
...
components: {UserName},
    data() {
      return {
        user: {
          name: '',
          ...
        }
      }
    },
    created() {
      this.fetchUser()
      console.log(this.user) //<- object as it is expected
    },
    methods: {
      fetchUser() {
        let that = this
        axios.get(//...)
          .then(response => {
            for (let key in response.data) {
              that.user[key] = response.data[key]
            }
          })
        console.log(that.user) //<- object as it is expected
      }
    }

孩子

<h3 v-if="!editing" @click="edit">{{ usersName }}</h3>
<div v-if="editing">
    <div>
        <input type="text" v-model="usersName">
    </div>
</div>
...
props: {
  name: {
    type: String,
    default: ''
  },
},
data() {
  return {
    editing: false,
    usersName: this.name,
    ...
  }
},

问题：即使将name属性设置为子元素，usersName的数据值仍为空。我已经检查了Vue调试扩展-相同的问题。

到目前为止我尝试过什么（无济于事）：

1）props: ['name']

2）

props: {
  name: {
    type: String
  },
},

3）usersName: JSON.parse(JSON.stringify(this.name))

4）<UserName :name="this.user.name"></UserName>

P。 S.当我将静态值从父级传递给子级

<UserName :name="'just a string'"></UserName>

usersName设置正确。

我还尝试将name道具更改为某些foobar。我猜想name可能与组件name完全冲突。但这也没有帮助。

Answer 1

providedIn: 'root'最初是空的，后来从axios调用中获取一个值。 providers是在创建道具时从道具初始化的。它获得的值是初始的空值。当NewModule发生更改时，这不会影响子项中已初始化的AppModule项。

您可能希望将.sync modifier与settable computed一起使用，或者您可能需要放入watch以将更改从prop传播到孩子中。您想要哪种行为尚不清楚。

下面是使用NewModule

的示例

imports

AppModule

Answer 2

应该这样通过... <UserName :name="user.name"></UserName>

如果仍未设置data属性，则可以在mounted钩中设置name属性。

mounted() {
    this.usersName = this.name
}

如果这不起作用，则说明您的道具未正确传递。

旁注：我通常在挂接的钩子中console.log来测试这种情况。

Vue.js-未从prop设置数据值

2 个答案: