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

2021-06-29  本文已影响0人  訾博ZiBo

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
上一篇下一篇

猜你喜欢

热点阅读