【vue2】组件基础与组件传值(父子组件传值)

1.导入局部组件 ： 在scrip标签中导入
      import 组件名 from '组件路径'
2.挂载组件 ： 在export default里面写一个属性components
      export default {
        components: {
          "标签名": 组件名
        }
      }
3.使用组件 ： 像标签一样使用即可，组件可以理解为一个自定义标签
<组件名></组件名>

<template>
  <!-- 1.组件html代码，组件默认会把template里面的根元素作为挂载点因此下面不需要写el -->
  <!-- 为什么组件data必须是一个函数 :因为组件是需要复用的，如果组件data是一个对象，那么组件在复用的时候就会使用相同的对象地址。一旦在一个地方被修改，其他的也会跟着修改。
        如果组件data是一个函数，组件在每一次复用的时候就会调用这个函数得到一个全新的对象，这样就可以做到在复用的时候每个组件之间的数据都是独立的，互不影响。 -->
  <div>
    <h1>我是App.vue</h1>
    <!-- 1.组件的使用 -->
    <MyPens></MyPens>
  </div>
</template>
<script>
// 1.组件业务js导入
import MyPens from '@/components/MyPens.vue'
export default {
  // 2.组件的注册
  components: {MyPens},
  // 存放vue的实例对象
  data() {
    return {
      // 在这里写data数据.必须是函数！！！，{}本质是new出来了一个
    }
  },
  methods: {},
  computed: {},
}
</script>
<style>
/* 3.组件的样式 */
</style>

<template>
<div> 
存放HTML结构,不写标签就会报错
<hr>
{{ msg }}
</div>
<!-- 
  1.组件中的最外层父元素只能有一个，不能添加两个平级父元素
  正确：  <div> <div></div> <div>
  错误:   <div></div> <div></div> -->
</template>
<script>
// 2.js代码，写组件js业务逻辑
export default {
    //之前vue实例的代码写在这里：可以放data,methods,计算属性、侦听器等
    //注意哟，组件里面的data是一个函数，返回值就是之前vue实例中的data对象
    data(){
        return{
            msg:'我是初映CY,我是放在MyPens中的'
        }
    },
}
</script>
<style>
/* 3.css:写组件样式 */
</style>

import MyButton from "@/components/MyButton.vue"//文件路径
Vue.component('MyButton',MyButton)//注册全局

<子组件> 
:arr="list"//这两种写法均可，推荐使用这种
 v-bind:id="item.id"
 <子组件> 

props:["属性名","属性名"]

props:["name","price","id"]

对象名: {
      type: 数据类型, //注意前面需要加：解析不然是字符串类型
      default: xxx, //默认值,可以不用写默认值
    },

props: {
    price: {
      type: Number, //注意前面需要加：解析不然是字符串类型
      default: 100, //默认值
        }
    }

this.$emit('方法名', 传递的数据)

this.$emit('price', this.id)

<子组件>
        @子组件定义的方法名='新方法名'
</子组件>

    <myGoods
      @price="doChange"
    ></myGoods>

methods: {
    // 接收MyGoods传来的值 3.根据定义事件来写属于我们的方法
    doChange(id) {
      //看子文件中传入的事件对象
      console.log(id)
      this.list.forEach((element) => {
        if (element.id === id) {
          element.price--
        }
      })
    },
  },

<template>
  <div class="box">
    <!-- 2.获取data中的值 -->
    <p>商品名称:{{ name }}</p>
    <p>商品价格:{{ price }}</p>
    <p>商品编号:{{ id }}</p>
    <button @click="doClick">点我来一🔪</button>
  </div>
</template>
<script>
export default {
  // 1.父传子(单项数据流)：子组件中声明props,会平铺到数据中
  // props:["name","price","id"]
  // 上述写法不可传指定类型值，因此我们优化下写法：
  props: {
    name: String,
    price: {
      type: Number, //注意前面需要加：解析不然是字符串类型
      default: 100, //默认值
    },
    id: {
      type: [String, Number],
      required: true, //必传
    },
  },
  methods: {
    // 2.&emit:子传父 自定义事件
    doClick() {
      // price是我们自定义的方法，this.id是传入的实参
      this.$emit('price', this.id)
      // this.price-- //子组件与父组件绑定了，当只在子组件修改的时候，与父组件不同步因此会报错。一般处理数据都是子传父
      // console.log(this.price);
    },
  },
}
</script>
<style scoped>
div {
  border: 2px solid rgb(6, 58, 199);
}
</style>

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 3.使用组件 -->
    <myGoods
      v-for="item in list"
      :key="item.id"
      :name="item.name"
      :price="item.price"
      :id="item.id"
      @price="doChange"
    ></myGoods>
  </div>
</template>
<script>
// 1.导入组件
import MyGoods from '@/components/MyGoods.vue'
export default {
  components: { MyGoods },
  //2. 注册事件
  data() {
    return {
      list: [
        {
          name: '苹果手机',
          price: 8888,
          id: 1,
        },
        {
          name: '小米手机',
          price: 5888,
          id: 2,
        },
        {
          name: '华为手机',
          price: 7888,
          id: 3,
        },
      ],
    }
  },
  methods: {
    // 接收MyGoods传来的值 3.根据定义事件来写属于我们的方法
    doChange(id) {
      //看子文件中传入的事件对象
      console.log(id)
      this.list.forEach((element) => {
        if (element.id === id) {
          element.price--
        }
      })
    },
  },
}
</script>
<style>
div {
  border: 2px solid rgb(234, 226, 12);
}
</style>