Vue作业2022/10/19——组件间的通信

最新推荐文章于 2024-06-20 13:52:53 发布

原创最新推荐文章于 2024-06-20 13:52:53 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了Vue组件间的父子通讯方式，包括v-model动态绑定、props单向数据流，以及如何保存原数据并处理副本。还涵盖了子组件向父组件传递数据的自定义事件和数据转换的应用实例。

1.子组件接收来自父组件的动态绑定的数据

父组件中的内容：

<template>
  <div id="app">
    <input type="text" v-model="s_value">
    <slot_demo :f_value="s_value"></slot_demo>
  </div>
</template>

<script>
import slot_demo from "@/components/slot_demo";

export default {
  name: 'App',
  components: {
    slot_demo
  },
  data(){
    return {
      s_value:'来自父级的数据'
    }
  }
}
</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>
    <p>子组件中接收到的来自父组件的数据：{{f_value}}</p>
  </div>
</template>

<script>
export default {
  name: "slot_demo",
  props:['f_value'],
  data(){
    return {
      msg:'组件中的数据'
    }
  }
}
</script>

<style scoped>

</style>

注意点：

在父组件的传递数据的属性上绑定v_bind属性，并将属性值改为父组件data节点中的变量名，当修改父组件中的值的时候子组件中的值也会随着一起被修改，需要注意的是这种数据流向只能单向的从父组件流向子组件。当修改子组件的props数组中的值的时候Vue会直接报错

这个洋文报错的意思是不建议你修改从props数组中接收到的变量值

2.子组件向父组件通信

子组件通过自定义事件的方式向父组件传递数据

父组件中的内容：

<template>
  <div id="app">
    {{count}}
    <slot_demo @CountAdd="GetCount" @CountRed="GetCount"></slot_demo>
  </div>
</template>

<script>
import slot_demo from "@/components/slot_demo";

export default {
  name: 'App',
  components: {
    slot_demo
  },
  data(){
    return {
      count: 0
    }
  },
  methods:{
    GetCount(count){
      this.count = count
    }
  }
}
</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>
    <button type="button" @click="add">点击+1</button>
    <button type="button" @click="red">点击-1</button>
  </div>
</template>

<script>
export default {
  name: "slot_demo",
  data(){
    return {
      count:0
    }
  },
  methods:{
    add(){
      this.count++
      this.$emit('CountAdd',this.count)
    },
    red(){
      this.count--
      this.$emit('CountRed',this.count)
    }
  }
}

</script>

<style scoped>

</style>

注意点：

示例的大概意思是在子组件中定义两个方法，一个加法一个减法，操作子组件中的一个变量，并在子组件中定义点击事件控制方法，并通过自定义事件将操作过的数据传递给父组件。在父组件的子组件标签上定义了两个自定义事件，值是父组件中的同一个方法，这个方法接收子组件中的数据并赋值给父组件的变量中再渲染到页面中

3.保存从父组件传递的原数据，并操作副本数据

当遇到需要经常修改接收到的父组件传递的值，但是同时又需要保持元数据不变，可以将接收到的数据存储到子组件的data节点中的变量副本中，操作变量中的数据即可

父组件中的内容：

<template>
  <div id="app">
    <slot_demo :f_value="count"></slot_demo>
  </div>
</template>

<script>
import slot_demo from "@/components/slot_demo";

export default {
  name: 'App',
  components: {
    slot_demo
  },
  data(){
    return {
      count: 0
    }
  },
}
</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>
    <p>接收到的原数据：{{f_value}}</p>
    <p>修改子组件中的数据副本：{{count}}</p>
    <button type="button" @click="add">点击加一</button>
  </div>
</template>

<script>
export default {
  name: "slot_demo",
  props:['f_value'],
  data(){
    return {
      count:this.f_value
    }
  },
  methods:{
    add(){
      this.count++
    }
  }
}

</script>

<style scoped>

</style>

注意点：

当有需求需要频繁修改接收子组件接收到的父组件的值，但是又需要随时恢复原值的时候可以使用这个特性

4.当需要对父组件传递的值再次进行转换的时候

当父组件传递的数据不能直接使用需要进行一定的修改的时候，比如当父组件传递的是一个数字，但是需要在使用的时候加上单位，就可以使用这个特性

父组件中的内容：

<template>
  <div id="app">
    <slot_demo :f_value="count" :f_color="color"></slot_demo>
    <input type="text" v-model="count">
    <input type="text" v-model="color">
  </div>
</template>

<script>
import slot_demo from "@/components/slot_demo";

export default {
  name: 'App',
  components: {
    slot_demo
  },
  data(){
    return {
      count: 100,
      color: 'red'
    }
  },
}
</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>
    <div :style="style">
      <p>你好世界</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "slot_demo",
  props:['f_value','f_color'],
  data(){
    return {
      width:'',
      height:'',
      color:''
    }
  },
  computed:{
    style(){
       return {
         width:this.f_value + 'px',
         height:this.f_value + 'px',
         backgroundColor:this.f_color
       }
    },
  }
}

</script>

<style scoped>

</style>

注意点：

案例是结合接收父组件传递的动态值的方式，将父组件的第一个值作为子组件div标签的宽高，第二个值作为背景颜色，并通过输入的值来实时修改成对应的大小。需要注意的是，在计算属性中，需要返回一个对象，即return的返回值必须用花括号括起来，原本的等号赋值，变成使用冒号赋值，然后将接受的值变成带有px单位的可以应用在样式中的属性值。