vue组件化(通讯)

1.组件封装和使用

步骤:

1.定义组件

2.引入

3.注册

4.使用

 

2.vue组件,使用scoped设置组件的私有化样式

<style scoped>
//h2的样式只会在当前的组件生效
h2 {
color:skyblue;
}
</style>

3.vue组件,/deep/深度作用选择符

1. 当子组件设置了样式scoped的话 , 在父组件无法选中子组件的标签

2.因此就可以使用深度作用选择符来选择中子组件的标签

3.格式 : 父组件选择器 /deep/ 子组件选择器 

4.vue组件, 父传子单向数据流中,不能在子组件内部修改父组件的数据--会报错

<template>

  <div>

    <h2>App.vue</h2>

    <p>我是父组件</p>

    <button @click="fn">改数据</button>

    <MyCom :name="name" :hobby="hobby" />

  </div>

</template>

<script>

import MyCom from "./MyCom.vue";

export default {

  data() {

    return {

      name: "胡歌",

      hobby: ["vue", "react"],

    };

  },

  components: {

    MyCom: MyCom,

  },

  methods: {

    fn() {

      this.name = "胡哥哥";

      this.hobby.push("小程勋");

    },

  },

};

</script>

<style >

</style>

<template>

  <div>

    <h2>MyCom.vue</h2>

    <p>我是子组件</p>

    <p>{{ name }}</p>

    <p>{{ hobby }}</p>

    <button @click="fn">改数据</button>

  </div>

</template>

<script>

export default {

  props: ["name", "hobby"],

  methods: {

    fn() {

      //打破了 单向数据流规则,vue会报错

      this.name = "胡哥哥";

      //打破了 单向数据流规则,vue不会会报错,但不能这样写,后续可能导致莫名的bug

      this.hobby.push("小程勋");

    },

  },

};

</script>

<style scoped>

</style>

5.vue组件中,子组件向父组件传值 

5.1案例如下 

<template>

  <div style="border: 1px solid #ccc">

    <h1>父组件</h1>

    <!--3.使用  父传子 ,自定义属性 -->

    <MyProduct

      @pdd="dao"

      v-for="(item, idx) in list"

      :key="item.id"

      :idx="idx"

      :goodname="item.proname"

      :price="item.proprice"

      :info="item.info"

    />

  </div>

</template>

<script>

//1.引入

import MyProduct from "./MyProduct.vue";

export default {

  data() {

    return {

      list: [

        {

          id: 1,

          proname: "超级好吃的棒棒糖",

          proprice: 18.8,

          info: "开业大酬宾, 全场8折",

        },

        {

          id: 2,

          proname: "超级好吃的大鸡腿",

          proprice: 34.2,

          info: "好吃不腻, 快来买啊",

        },

        {

          id: 3,

          proname: "超级无敌的冰激凌",

          proprice: 14.2,

          info: "炎热的夏天, 来个冰激凌了",

        },

      ],

    };

  },

  //2.注册

  components: {

    MyProduct,

  },

  methods: {

    dao(obj) {

      console.log("子组件传数据了");

      this.list[obj.idx].proprice -= obj.n;

    },

  },

};

</script>

<style>

</style> 

<template>

  <div style="border: 1px solid #ccc">

    <h2>标题 : {{ goodname }}</h2>

    <p>价格: {{ price.toFixed(2) }}元</p>

    <p>

      {{ info }}

    </p>

    <p><button @click="fn">砍一刀</button></p>

  </div>

</template>

<script>

export default {

  //接收---是个数组

  props: ["goodname", "price", "info", "idx"],

  methods: {

    fn() {

      //这里要接收父组件的下标idx来确定砍的是哪件商品

      const n = Math.ceil(Math.random() * 10);

      this.$emit("pdd", { idx: this.idx, n });

    },

  },

};

</script>

<style>

</style>