美文网首页
【Vue3 从入门到实战 进阶式掌握完整知识体系】014-探索组

【Vue3 从入门到实战 进阶式掌握完整知识体系】014-探索组

作者: 訾博ZiBo | 来源:发表于2021-06-29 22:05 被阅读0次

    5、父子组件如何通过事件进行通信

    子组件调用的方法让父组件处理

    子组件调用父组件的方法来改变父组件的数据。子组件无法改变父组件传过来的数据，可以通过此方法请求父组件来进行改变！

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    methods:{
      // 在这里写一个 handleAddOne() 方法
      handleAddOne(){
        this.count ++;
      }
    },
    // 父组件监听子组件要调用的方法，指向一个方法
    // 注意这里的 addOne 最好写成 add-one
    template: `
        <div>
          <test :count="count" @add-one="handleAddOne()" />
        </div>
    `
  });

  
  app.component('test',{
    props:['count'],
    methods:{
      // 我们知道在这里我们不能修改 count 的值，因为它来自父组件
      // 但有时候我们确实需要修改这个值，我们就告诉父组件让父组件修改它
      // 也就是子组件告诉父组件自己想要调用一个方法
      // 注意，这里的 addOne 不能带 () 括号
      addOne(){
        this.$emit('addOne')
      }
    },
    template: `
        <div @click="addOne()">{{count}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

    运行结果

    image-20210613145446569.png

    子组件调用父组件的方法并传参数

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    methods:{
      // 在这里写一个 handleAdd() 方法
      handleAdd(param){
        this.count += param;
      }
    },
    // 父组件监听子组件要调用的方法，指向一个方法
    // 注意这里的 handleAdd 不能带 () ，因为带括号就意味着明确没有传参数
    template: `
        <div>
          <test :count="count" @add="handleAdd" />
        </div>
    `
  });

  
  app.component('test',{
    props:['count'],
    methods:{
      // 我们知道在这里我们不能修改 count 的值，因为它来自父组件
      // 但有时候我们确实需要修改这个值，我们就告诉父组件让父组件修改它
      // 也就是子组件告诉父组件自己想要调用一个方法
      // 注意，这里的 add 不能带 () 括号
      // 可以传多个参数，父组件事件中使用对应数量的参数接收即可
      add(){
        this.$emit('add', 5)
      }
    },
    template: `
        <div @click="add()">{{count}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

    运行结果

    image-20210613150236756.png

    在子组件中计算出来后上传给父组件参数

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    methods:{
      // 在这里写一个 handleAdd() 方法
      handleAdd(param){
        this.count = param;
      }
    },
    // 父组件监听子组件要调用的方法，指向一个方法
    // 注意这里的 handleAdd 不能带 () ，因为带括号就意味着明确没有传参数
    template: `
        <div>
          <test :count="count" @add="handleAdd" />
        </div>
    `
  });

  
  app.component('test',{
    props:['count'],
    methods:{
      // 我们知道在这里我们不能修改 count 的值，因为它来自父组件
      // 但有时候我们确实需要修改这个值，我们就告诉父组件让父组件修改它
      // 也就是子组件告诉父组件自己想要调用一个方法
      // 注意，这里的 add 不能带 () 括号
      add(){
        this.$emit('add', this.count + 3)
      }
    },
    template: `
        <div @click="add()">{{count}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

    运行结果

    image-20210613150548226.png

    校验子组件对外触发的事件

    在子组件里面写一个 emits: ['方法名'] 来实现校验，因为当子组件里面的内容太多的话就影响可读性，把对外触发的事件全写在这里面有助于阅读！

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    methods:{
      handleAdd(param){
        this.count = param;
      }
    },
    template: `
        <div>
          <test :count="count" @add="handleAdd" />
        </div>
    `
  });

  
  app.component('test',{
    props:['count'],
    // 在这里写一个 add 不会报错
    // 但没有写 add 而是写了一个 addOne 就会警告
    // 如果存在 emits 属性，那么对外触发的时候都要写进来，否则会警告
    emits: ['addOne'],
    methods:{
      add(){
        this.$emit('add', this.count + 3)
      }
    },
    template: `
        <div @click="add()">{{count}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

    运行结果

    image-20210613154043173.png

    更多的校验

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    methods:{
      handleAdd(param){
        this.count = param;
      }
    },
    template: `
        <div>
          <test :count="count" @add="handleAdd" />
        </div>
    `
  });

  
  app.component('test',{
    props:['count'],
    // 在这里写一个 add 不会报错
    // 但没有写 add 而是写了一个 addOne 就会警告
    // 如果存在 emits 属性，那么对外触发的时候都要写进来，否则会警告
    emits: {
      // 检验参数
      add: (count) => {
        if(count > 0){
          return true;
        }else{
          return false;
        }
      }
    },
    methods:{
      add(){
        this.$emit('add', this.count + 3)
      }
    },
    template: `
        <div @click="add()">{{count}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

    运行结果

    image-20210613154340970.png

    父子组件之间的”双向绑定“

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    template: `
        <div>
          <test v-model="count" />
        </div>
    `
  });

  
  app.component('test',{
    // modelValue 是固定写法
    props:['modelValue'],
    methods:{
      add(){
        // 固定写法
        this.$emit('update:modelValue', this.modelValue + 3)
      }
    },
    template: `
        <div @click="add()">{{modelValue}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

    运行结果

    image-20210613154959373.png

    自定义modelValue

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    template: `
        <div>
          <test v-model:app="count" />
        </div>
    `
  });

  
  app.component('test',{
    // modelValue 是固定写法
    props:['app'],
    methods:{
      add(){
        // 固定写法
        this.$emit('update:app', this.app + 3)
      }
    },
    template: `
        <div @click="add()">{{app}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

    运行结果

    image-20210613155101659.png

    相关文章

      网友评论

          本文标题：【Vue3 从入门到实战 进阶式掌握完整知识体系】014-探索组

          本文链接：https://www.haomeiwen.com/subject/outlultx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|【Vue3 从入门到实战 进阶式掌握完整知识体系】014-探索组|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！