Vue基础篇之数据的传递以及对生命周期的监听

已于 2022-11-30 17:24:56 修改
阅读量241 收藏
点赞数 1
文章标签： css html css3
于 2022-11-28 22:35:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fvcvv/article/details/128085849
版权

文章目录

数据的传递

每一部分的内容都需要父组件进行传递

  • 1）如标题内容 直接使用传递字符串既可

父组件

<template>
  <div>
    <DialogDemo  title="地址"/>
  </div>
</template>

子组件

<template>
  <div>
    <button>阿迪达斯</button>
    <div class="mask">
      <div class="dialog">
        <!-- 每一部分的内容都需要父组件传递 -->
        <!-- 1.标题内容 直接传递字符串既可 -->
        <div class="dialog-header">{{title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['title']
}
</script>

================================================================================================

  • 2）对话框的内容部分，不确定性太确，它可以展示任何标签， 此时就需要父组件传递插槽给子组件，也就是传递 html 结构个子组件

父组件：
1.父组件内写在子组件的标签中间
2.给子组件进行传递 插槽 内容
3.但需要把标签写成闭合标签

<template>
  <div>
    <!-- 父组件内写在子组件的标签中间 -->
    <!-- 给子组件进行传递 插槽 内容 -->
    <!-- 但需要把标签写成闭合标签 -->
    <DialogDemo  title="地址">
      <form action="">
        <input type="text">
        <input type="text">
      </form>
    </DialogDemo>
  </div>
</template>

子组件：需要在子组件内写 <slot />进行接收

<template>
  <div>
    <button>阿迪达斯</button>
    <div class="mask">
      <div class="dialog">
        <!-- 每一部分的内容都需要父组件传递 -->
        <!-- 1.标题内容 直接传递字符串既可 -->
        <div class="dialog-header">{{title}}</div>
         <!-- 2.对话框的内容部分，不确定性太确，它可以展示任何标签，
        此时就需要父组件传递插槽给子组件，也就是传递 html 结构个子组件 -->
        <div class="dialog-content">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['title']
}
</script>

================================================================================================

  • 3）当需要分类传递内容的时候
    • 我们可以使用 具名插槽来区别（也就是给插槽起名字）

父组件：
1.在父组件中利用 template 以及 v-slot 给插槽命名
2.没有起名字的插槽部分 都称为默认插槽 default

<template>
  <div>
    <!-- 父组件内写在子组件的标签中间 -->
    <!-- 给子组件进行传递 插槽 内容 -->
    <!-- 但需要把标签写成闭合标签 -->
    <DialogDemo  title="地址">
      <!-- 当需要分类传递内容的时候 -->
      <!-- 我们可以使用 具名插槽来区别（也就是给插槽起名字） -->
      <!-- 在父组件中利用 template 以及  v-slot 给插槽命名 -->
      <template v-slot:cpntent>
        <form action="">
        <input type="text">
        <input type="text">
      </form>
      </template>
      <!-- 没有起名字的插槽部分 都称为默认插槽  default -->
      <div>
        <button>取消</button>
        <button>确定</button>
      </div>
    </DialogDemo>
  </div>
</template>

子组件：在子组件中使用父组件 命名 comtent 插槽
slot 也可以不起名字，因为它获取的是 默认插槽

<template>
  <div>
    <button>阿迪达斯</button>
    <div class="mask">
      <div class="dialog">
        <!-- 对话框的三部分内容都不是固定的内容 -->
        <!-- 每一部分的内容都需要父组件传递 -->
        <!-- 1.标题内容 直接传递字符串既可 -->
        <div class="dialog-header">{{title}}</div>
        <!-- 2.对话框的内容部分，不确定性太确，它可以展示任何标签，
        此时就需要父组件传递插槽给子组件，也就是传递 html 结构个子组件 -->
        <div class="dialog-content">
          <!-- 在子组件中使用父组件命名的 comtent 的插槽 -->
          <slot name="cpntent" />
        </div>
        <div class="dialog-foot">
          <!-- slot 可以不起名字，它获取的是 默认插槽  -->
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['title']
}
</script>

在这里插入图片描述

================================================================================================

  • 4）

子组件的样式

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0,0,0,0.5);
}

.mask .dialog{
  position: absolute;
  background-color: #fff;
  width: 600px;
  top: 160px;
  left: 50%;
  margin-left: -250px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.mask .dialog .dialog-header , .mask .dialog .dialog-foot {
  padding: 15px;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0;
}

.mask .dialog .dialog-header {
  display: flex;
  justify-content: space-between;
}
.mask .dialog .dialog-header .close{
  cursor: pointer;
}
.mask .dialog .dialog-content {
  padding: 15px;
  border-bottom: 1px solid #ccc;
  flex-grow: 1;
}

.mask .dialog .dialog-foot {
  display: flex;
  justify-content: flex-end;
  border-bottom: 0;
}
</style>

================================================================================================

  • 5）让我们上面所写的东西先消失，在点击阿迪达斯后出现

父组件：

<template>
  <div>
    <button @click="show = true">阿迪达斯</button> <!--点击时出现-->
   ...
  </div>
</template>

<script>
export default {
  ...
  data() {
    return {
      show: false
    }
  }
}
</script>

================================================================================================

  • 6）点击灰色的地方以及 × 关闭我们显示的东西

父组件：给父组件定义方法 并且传递给子组件

<template>
  <div>
    <button @click="show = true">阿迪达斯</button>
    ...
    <!--将它传递给子组件-->
    <DialogDemo title="地址"  :show="show"  @close="close">
    <!---->
     <!--<DialogDemo title="地址"  :show.sync="show">  也可简写成这样-->
    ...
</template>

<script>
import DialogDemo from "./components/DialogDemo.vue";
export default {
  components: { DialogDemo },
  // 定义方法
  data() {
    return {
      show: false,
    };
  },
  methods: {
    close() {
      this.show = false;
    },
  },
};
</script>

子组件：接收父组件传递过来的方法

<template>
    <!-- 对话框 -->
     <!--点击空白的地方 关闭-->
    <div v-show="show" class="mask" @click.self="$emit('close')">
   <!-- <div v-show="show" class="mask" @click.self="$emit('update:show',false)">  也可简写成这样-->
    .....
        <div class="dialog-header">
          <span>{{title}}</span>
           <!--点击 × 的地方 关闭-->
          <span class="close" @click.self="$emit('close')">×</span>
          <!-- <span class="close" @click.self="$emit('update:show',false)">×</span> 也可简写成这样-->
        </div>
        .....
</template>

<script>
export default {
  props:['title','show'],
}
</script>
...

================================================================================================

  • 7）点击确定先完成信息的确定再关闭，点击取消直接关闭

父组件：

<template>
  <div>
  ...
      <div>
        <button @click="show = false">取消</button>
        <button @click="ok">确定</button>
      </div>
    </DialogDemo>
  </div>
</template>

<script>
...
  methods: {
  ...
    // 对确认的信息进行 提示
    ok(){
      console.log('确定这样做')
      this.show = false
    }
  },
};
</script>

================================================================================================

  • 8）当出现弹窗的时候，滚动条不能滑动

在子组件内使用 updated 生命周期功能

<script>
export default {
  props:['title','show'],
  updated() {
    if(this.show){
      document.body.style.overflowY = 'hidden'
    }
  }
}
</script>

如果让滚动条消失，滚动条消失时 页面会重新进行渲染布局

<script>
export default {
  props:['title','show'],
  updated() {
    if(this.show){
      // 隐藏滚动条
      document.body.style.overflowY = 'hidden'
      document.body.style.paddingRight = '17px'
    }else{
      document.body.style.overflowY = 'scroll'
      document.body.style.paddingRight = '0'
    }
  }
}
</script>

================================================================================================

  • 9）使用生命周期来实现监听

使用生命周期 updated 来监听 props 的变化
这里我们也可以利用 侦听器来监听，使用 watch 侦听器 props、data、computed
语法 watch：{监听的内容：函数}

<script>
export default {
  props:['title','show'],
 watch: {
    show(newVal) {
      if (newVal) {
        document.body.style.overflowY = "hidden";
        document.body.style.paddingRight = "17px";
      } else {
        document.body.style.overflowY = "scroll";
        document.body.style.paddingRight = "0";
      }
    },
  },
}
</script>

方法二：watch:{监听的内容：{ handler：函数，deep：true,immediate：true}}
deep: true, // 进行深层次侦听值，有些时候值是复杂数据的时候更新某个属性并不会导致侦听器触发，就可以加deep：true
immediate: true //组件初始时就执行一次侦听函数 （例：打开某一个软件时候的 弹窗）

<script>
export default {
  props:['title','show'],
 watch: {
    show: {
      handler(newVal) {
        if (newVal) {
          document.body.style.overflowY = "hidden";
          document.body.style.paddingRight = "17px";
        } else {
          document.body.style.overflowY = "scroll";
          document.body.style.paddingRight = "0";
        }
      },
      // deep: true, // 进行深层次侦听值，有些时候值是复杂数据的时候更新某个属性并不会导致侦听器触发，就可以加deep：true
      immediate: true //组件初始时就执行一次侦听函数
    },
  },
}
</script>

总结

  • 插槽的使用：
    • 我们可以使用 具名插槽来区别（也就是给插槽起名字）

父组件：
1.在父组件中利用 template 以及 v-slot 给插槽命名
2.没有起名字的插槽部分 都称为默认插槽 default

子组件：在子组件中使用父组件 命名 comtent 插槽
slot 也可以不起名字，因为它获取的是 默认插槽

  • 侦听器的使用

使用生命周期 updated 来监听 props 的变化
这里我们也可以利用 侦听器来监听，使用 watch 侦听器 props、data、computed
语法 watch：{监听的内容：函数}

方法二：watch:{监听的内容：{ handler：函数，deep：true,immediate：true}}
deep: true, // 进行深层次侦听值，有些时候值是复杂数据的时候更新某个属性并不会导致侦听器触发，就可以加deep：true
immediate: true //组件初始时就执行一次侦听函数 （例：打开某一个软件时候的 弹窗）

总代码

父组件

<template>
  <div>
    <button @click="show = true">阿迪达斯</button>
    <!-- 父组件内写在子组件的标签中间 -->
    <!-- 给子组件进行传递 插槽 内容 -->
    <!-- 但需要把标签写成闭合标签 -->
    <!-- <DialogDemo title="地址"  :show="show"  @close="close"> -->
      <DialogDemo title="地址"  :show.sync="show">
      <!-- 当需要分类传递内容的时候 -->
      <!-- 我们可以使用 具名插槽来区别（也就是给插槽起名字） -->
      <!-- 在父组件中利用 template 以及  v-slot 给插槽命名 -->
      <template v-slot:cpntent>
        <form action="">
          <input type="text" />
          <input type="text" />
        </form>
      </template>
      <!-- 没有起名字的插槽部分 都称为默认插槽  default -->
      <div>
        <button @click="show = false">取消</button>
        <button @click="ok">确定</button>
      </div>
    </DialogDemo>
  </div>
</template>

<script>
import DialogDemo from "./components/DialogDemo.vue";
export default {
  components: { DialogDemo },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    // close() {
    //   this.show = false;
    // },
    ok(){
      console.log('确定这样做')
      this.show = false
    }
  },
};
</script>

<style>
</style>

子组件

<template>
  <!-- 对话框 -->
  <!--点击空白的地方 关闭-->
  <div v-show="show" class="mask" @click.self="$emit('update:show', false)">
    <div class="dialog">
      <!-- 对话框的三部分内容都不是固定的内容 -->
      <!-- 每一部分的内容都需要父组件传递 -->
      <!-- 1.标题内容 直接传递字符串既可 -->
      <div class="dialog-header">
        <span>{{ title }}</span>
        <!--点击 × 的地方 关闭-->
        <span class="close" @click.self="$emit('update:show', false)">×</span>
      </div>
      <!-- 2.对话框的内容部分，不确定性太确，它可以展示任何标签，
        此时就需要父组件传递插槽给子组件，也就是传递 html 结构个子组件 -->
      <div class="dialog-content">
        <!-- 在子组件中使用父组件命名的 comtent 的插槽 -->
        <slot name="cpntent" />
      </div>
      <div class="dialog-foot">
        <!-- slot 可以不起名字，它获取的是 默认插槽  -->
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["title", "show"],
  // updated() {
  //   if(this.show){
  //     // 隐藏滚动条
  //     document.body.style.overflowY = 'hidden'
  //     document.body.style.paddingRight = '17px'
  //   }else{
  //     document.body.style.overflowY = 'scroll'
  //     document.body.style.paddingRight = '0'
  //   }
  // },
  //> 使用生命周期 `updated` 来监听 `props` 的变化
  // > 这里我们也可以利用 侦听器来监听，使用 `watch` 侦听器 一般用零监听 props data computed
  // > 语法  watch：{监听的内容：函数}
  // watch:{监听的内容：{ handler：函数，deep：true,immediate：true}}
  watch: {
    show: {
      handler(newVal) {
        if (newVal) {
          document.body.style.overflowY = "hidden";
          document.body.style.paddingRight = "17px";
        } else {
          document.body.style.overflowY = "scroll";
          document.body.style.paddingRight = "0";
        }
      },
      // deep: true, // 进行深层次侦听值，有些时候值是复杂数据的时候更新某个属性并不会导致侦听器触发，就可以加deep：true
      immediate: true //组件初始时就执行一次侦听函数
    },
  },
};
</script>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
}

.mask .dialog {
  position: absolute;
  background-color: #fff;
  width: 600px;
  top: 160px;
  left: 50%;
  margin-left: -250px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.mask .dialog .dialog-header,
.mask .dialog .dialog-foot {
  padding: 15px;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0;
}

.mask .dialog .dialog-header {
  display: flex;
  justify-content: space-between;
}
.mask .dialog .dialog-header .close {
  cursor: pointer;
}
.mask .dialog .dialog-content {
  padding: 15px;
  border-bottom: 1px solid #ccc;
  flex-grow: 1;
}

.mask .dialog .dialog-foot {
  display: flex;
  justify-content: flex-end;
  border-bottom: 0;
}
</style>
fvcvv
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue的生命周期及监听函数简单介绍
qq_37734787的博客
06-11 648
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body>
vue2.0 hookEvent 监听组件生命周期
qq_26642611的博客
07-03 366
export default { mounted() { this.chart = echarts.init(this.$el) // 请求数据，赋值数据 等等一系列操作... // 监听窗口发生变化，resize组件 window.addEventListener('resize', this.$_handleResizeChart) // 通过hook监听组件销毁钩子函数，并取消监听事件 this.$once('hook:beforeDest
Vue的侦听方法和生命周期
最新发布
Luo3255069063的博客
03-30 1243
作用：侦听一个数据，当这个数据发生变化了马航执行对应的方法
vue 内部监听生命周期函数
weixin_44961532的博客
07-06 437
在Vue组件中，可以用过$on,$once去监听所有的生命周期钩子函数
前端开发——Vue 监听组件生命周期
helloyangkl的博客
02-17 276
前端开发——Vue 监听组件生命周期
Vue中updated和watch的区别
cai_niao5623的博客
11-09 1494
watch:监听器,监听某个数据的变化从而来执行一些操作 仅仅是数据发生改变的时候会侦听到 只是会检测到你写在watch里的那些属性,没写的就不会触发 updated:是vue生命周期里面的一个钩子函数—data数据更新后触发视图更新。这里是视图更新之后的操作可以在这里执行。 不能监听到路由数据(例如网址中的参数) 所有的数据发生变化都会调用(消耗性能) 执行到它的时候时候是数据发生变化且界面更新完毕 每次触发的代码都是同一个 ...
Vue父组件监听子组件生命周期
10-14
主要介绍了Vue父组件监听子组件生命周期,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue生命周期activated之返回上一页不重新请求数据操作
10-15
主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue select选择框数据变化监听方法
01-19
1、使用v-model在select标签上进行数据双向绑定， 2、在data里边添加val：‘ ...以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
详解vue.js数据传递以及数据分发slot
10-18
本篇文章给大家通过代码实例分析了vue.js数据传递以及数据分发slot的相关知识，有这方面兴趣的朋友参考下吧。
vue生命周期和react生命周期对比【推荐】
10-18
本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue hookEvent监听组件生命周期
大灰狼的小绵羊哥哥的博客
09-01 577
Vue hookEvent监听组件生命周期
vue父子组件传值，以及监听传值(超级详细)
热门推荐
咸鱼起码是条鱼
11-18 1万+
vue最常用到的就是父子之间的传值了，下面我来详细说一下。 1.父组件传值给子组件(父传子,子直接props接收就可以，就像王位继承) 父组件中： 子组件中： 到这里父传子的工作就做完了 2.子组件给父组件传值(子传父，下级向上级汇报需要自己主动发送，也就是事件发射) 子组件中： 父组件中： 结束 希望对你有所帮助，可以手敲试试！ ...
【vue2】vue的生命周期以及数据监听分析
????鱼干～
03-22 1026
【vue2】vue的生命周期以及数据监听分析
Vue中数据监听的方法
hdwddadsf的博客
06-25 8413
Vue中watch监听的简单使用
vue中父组件如何能监听到子组件的生命周期
想好了再写！
01-25 1620
一、通过 $emit 实现 以 mounted 为例，在父组件 Parent 和子组件 Child 中，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现： // 父组件 Parent.vue中 <Child @mounted="handleDoSomething"/> // 子组件 Child.vue中 mounted() { this.$emit("mounted我被触发了~"); } 缺点：以上方法虽然可行，但每次都需要手动写一次 $emit
Vue中父组件如何能监听到子组件的生命周期
陌上花开然不归矣
04-01 6434
Vue中父组件如何能监听到子组件的生命周期 方法1：$emit 方法2：@hook 3、为什么要使用@hook以及使用场景 4、Vue 中如何使用 @hook？
Vue.js——监听组件的生命周期
仰望星空的代码
07-04 2053
有父组件Parent和子组件Child，如果父组件监听到子组件挂载mounted就做一些逻辑处理，常规的写法可能如下： // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 这里提供一种特别简单的方式，子组件不需要任何处理，只需要在父组...
React 在哪个生命周期里监听props变化发请求
lsk222的博客
03-17 2551
先说答案 (第三个参数 是 getSnapShotbeforeUpdate 的返回值) componentDidUpdate(prevProps, prevState, snapshot) Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare
vue生命周期数据请求
07-30
在Vue生命周期中，数据请求通常发生在created生命周期函数中。在这个阶段，Vue对象已经创建完成，但是DOM还没有被渲染出来。所以在created函数中进行数据请求是比较常见的做法。[1] 然而，有时候我们可能会遇到一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fvcvv

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值