Javascript Vue:在单击按钮时从父组件更改子组件的数据无法设置未定义的属性

我有两个组件：孩子

Dog

和父母

App

。在

应用程序中

我试图更改

狗

的属性

hasName

和

name

点击按钮。但是我得到一个错误：

hasName

未定义

子组件：

Dog.vue

<template>
  <div>
    <div>A Dog</div>
    <div v-if="hasName">Name: {{ name }}</div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      hasName: false,
      name: "",
    };
  },
};
</script>

<template>
<div id = "app">
  <img alt="Vue logo" src="./assets/logo.png" />
  <Dog />
  <button @click="handleClick">Click</button>
</div>
</template>

<script>
import Dog from "./components/Dog.vue";
export default {
  name: "App",
  components: {
    Dog,
  },
  methods: {
    handleClick: function () {
      this.Dog.hasName = true;
      this.Dog.name = "Jerry";
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
<div id = "app">
  <img alt="Vue logo" src="./assets/logo.png" />
  <Dog :name="dog.name" :has-name="dog.hasName" />
  <button @click="handleClick">Click</button>
</div>
</template>

import Dog from "./components/Dog.vue";
export default {
  name: "App",
  data() {
      return {
          dog: {
              hasName: false,
              name: '',
          },
      }
  },
  components: {
    Dog,
  },
  methods: {
    handleClick: function () {
      this.dog.hasName = true;
      this.dog.name = "Jerry";
    },
  },
};

<template>
  <div>
    <div>A Dog</div>
    <div v-if="hasName">Name: {{ name }}</div>
  </div>
</template>

<script>
export default {
  props: {
      hasName: {
          required: true,
          type: Boolean,
      },
      name: {
          required: true,
          type: String,
      },
  },
};
</script>

---

Vue fiddle:

您不能像这样访问子组件的数据

在您的

App.vue

组件中，当您访问

Dog

时，它只是对组件本身的引用，而不是对组件的任何安装版本的引用

想象一下，如果你有多个狗组件。您如何区分组件数据

您需要使用道具将数据从父对象传递给子对象

例如：

App.vue

<template>
  <div>
    <div>A Dog</div>
    <div v-if="hasName">Name: {{ name }}</div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      hasName: false,
      name: "",
    };
  },
};
</script>

<template>
<div id = "app">
  <img alt="Vue logo" src="./assets/logo.png" />
  <Dog />
  <button @click="handleClick">Click</button>
</div>
</template>

<script>
import Dog from "./components/Dog.vue";
export default {
  name: "App",
  components: {
    Dog,
  },
  methods: {
    handleClick: function () {
      this.Dog.hasName = true;
      this.Dog.name = "Jerry";
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
<div id = "app">
  <img alt="Vue logo" src="./assets/logo.png" />
  <Dog :name="dog.name" :has-name="dog.hasName" />
  <button @click="handleClick">Click</button>
</div>
</template>

import Dog from "./components/Dog.vue";
export default {
  name: "App",
  data() {
      return {
          dog: {
              hasName: false,
              name: '',
          },
      }
  },
  components: {
    Dog,
  },
  methods: {
    handleClick: function () {
      this.dog.hasName = true;
      this.dog.name = "Jerry";
    },
  },
};

<template>
  <div>
    <div>A Dog</div>
    <div v-if="hasName">Name: {{ name }}</div>
  </div>
</template>

<script>
export default {
  props: {
      hasName: {
          required: true,
          type: Boolean,
      },
      name: {
          required: true,
          type: String,
      },
  },
};
</script>

点击
从“/components/Dog.vue”导入狗；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
狗：{
hasName:false，
名称：“”，
},
}
},
组成部分：{
狗，
},
方法：{
handleClick:函数（）{
this.dog.hasName=true；
this.dog.name=“Jerry”；
},
},
};

Dog.vue

<template>
  <div>
    <div>A Dog</div>
    <div v-if="hasName">Name: {{ name }}</div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      hasName: false,
      name: "",
    };
  },
};
</script>

<template>
<div id = "app">
  <img alt="Vue logo" src="./assets/logo.png" />
  <Dog />
  <button @click="handleClick">Click</button>
</div>
</template>

<script>
import Dog from "./components/Dog.vue";
export default {
  name: "App",
  components: {
    Dog,
  },
  methods: {
    handleClick: function () {
      this.Dog.hasName = true;
      this.Dog.name = "Jerry";
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
<div id = "app">
  <img alt="Vue logo" src="./assets/logo.png" />
  <Dog :name="dog.name" :has-name="dog.hasName" />
  <button @click="handleClick">Click</button>
</div>
</template>

import Dog from "./components/Dog.vue";
export default {
  name: "App",
  data() {
      return {
          dog: {
              hasName: false,
              name: '',
          },
      }
  },
  components: {
    Dog,
  },
  methods: {
    handleClick: function () {
      this.dog.hasName = true;
      this.dog.name = "Jerry";
    },
  },
};

<template>
  <div>
    <div>A Dog</div>
    <div v-if="hasName">Name: {{ name }}</div>
  </div>
</template>

<script>
export default {
  props: {
      hasName: {
          required: true,
          type: Boolean,
      },
      name: {
          required: true,
          type: String,
      },
  },
};
</script>

狗
名称：{{Name}
导出默认值{
道具：{
hasName：{
要求：正确，
类型：布尔型，
},
姓名：{
要求：正确，
类型：字符串，
},
},
};

当您修改父对象

dog

时，数据会通过道具自动传递给子对象，并在那里更新

---

请阅读以了解有关道具的更多信息。您需要发出事件侦听操作。

hasName

不是数据对象，因此不会定义它