【vue父子组件传值】网站首页 学无止境

【vue父子组件传值】

聪明的墨菲特学前端 2024-06-17 10:24:54

简介【vue父子组件传值】

【vue父子组件传值】

父传子

在父组件的子标签中写一个自定义属性标签
子组件设置props属性就可以接受父组件传值

子传父

1、在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
2、子组件可以触发这个事件$emit('事件名字')

子组件给父组件传递数据

$emit方法第二个参数可以定义子组件给父组件传递的内容

在父组件中怎么拿到这内容：

父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
父组件有自定义参数，可以传入 event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

//第一个参数：自定义的名字
//第二个参数：传递的数据
// this.$emit('tofather', '传过去的数据')
 this.$emit('tofather', { name: 'zs', age: 18 })

代码示例

<body>
  <div id='app'>
    <father></father>
  </div>


  <template id="father">
    <div>
      <son :type="type1" @tofather="tofather1(1,$event)"></son>
    </div>
  </template>


  <template id="son">


    <div>son
      <button @click="toFa">toFa</button>
    </div>
  </template>


  <script>
    // 父组件
    Vue.component('father', {
      template: '#father',
      data() {
        return {
          type1: 'free'
        }
      },
      methods: {
        // 接收来自子组件的传值
        tofather1(data, data2) {
          console.log(data);
          console.log(data2);
        }
      }
    })
    // 子组件
    Vue.component('son', {
      template: '#son',
      data() {
        return {
        }
      },
      props: {
        type: {
          type: [String, Number],
          default: () => {
            return 'free'
          }
        }
      },
      methods: {
        toFa() {
          //第一个参数：自定义的名字
          //第二个参数：传递的数据
          // this.$emit('tofather', '传过去的数据')
          this.$emit('tofather', { name: 'zs', age: 18 })
        }
      },
      created() {
        // this.$emit('tofather', { name: 'zs', age: 18 })
        console.log(this.type);
      }
    })
    const vm = new Vue({
      el: '#app',
      data: {
      },
      methods: {
      }
    })
  </script>
</body>