P13. 组件 数据

数据必须是对象

• App.vue

<script>
  import Content from "./components/Content.vue";
  export default {
    data() {
      return {

      };
    },
    components:{
      Content
    }
  }

</script>

<template>
  <div>
    <Content></Content>
    <Content></Content>
    <Content></Content>

  </div>

</template>

• Content.vue

<template>
  <div>
    <!--组件是可以复用 -->
    <Hello_kugou></Hello_kugou>
    <h2> content hello </h2>
    <h3>{{msg}}</h3>
    <button @click="msg='酷狗'"> chagebut</button>
    <Hello_kugou></Hello_kugou>
  </div>
</template>

<script>
import Hello_kugou from "./Hello_kugou.vue";
export default {
  data(){
    return{
      msg: 'hellokugoumsg'
    };
  },
  components:{
    Hello_kugou
  },
  name: "Content"
}
</script>

<style scoped>

</style>

• Hello_kugou.vue

<template>
  <div>
    <h2>hello kugou</h2>
  </div>
</template>

<script>
export default {
  name: "Hello_kugou"
}
</script>

<style scoped>

</style>

当数据使用不为对象

• Content.vue

<template>
  <div>
    <!--组件是可以复用 -->
    <Hello_kugou></Hello_kugou>
    <h2> content hello </h2>
    <h3>{{msg}}</h3>
    <button @click="msg='酷狗'"> chagebut</button>
    <Hello_kugou></Hello_kugou>
  </div>
</template>

<script>
const obj={
  msg:"hello---kugou"
}

import Hello_kugou from "./Hello_kugou.vue";
export default {
  data(){
    return obj
  },
  components:{
    Hello_kugou
  },
  name: "Content"
}
</script>

<style scoped>

</style>

因为有绝对作用域点关系，data一定要是函数 ，return一个对象
让每一个组件对象都返回一个对象，不对数据污染

  data(){//让每一个组件对象都返回一个对象，不对数据污染
    return{
      msg: 'hellokugoumsg'
    };