vue 模板

最新推荐文章于 2024-07-09 15:53:55 发布

原创最新推荐文章于 2024-07-09 15:53:55 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

javascript 同时被 2 个专栏收录

15 篇文章

订阅专栏

typescript

3 篇文章

订阅专栏

本文详细解析了Vue中父组件与子组件之间的通信机制。通过一个具体的示例，展示了如何在父组件中定义方法并在子组件中触发这些方法，同时讨论了属性传递和事件触发的过程。文章还涉及了组件生命周期钩子的使用，以及如何在数据变化时执行监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<template>
  <div>
      <comtest2  :name = "name" @func="getMsg"></comtest2>
      <button @click="dianji" >按钮</button>
  </div>
</template>

<script>
import test02 from './test02.vue';
export default {
      data() {
      return {
        name: "我的名字是test01",
        number: 0
      }
      },
      methods:{
        dianji(){
          this.number++
          alert("我是按钮")
        },
        getMsg(msg){
          console.log(msg)
        }
      }, 
      created(){
        console.log(this.name)
      },
      mounted(){
        console.log(this.name)
      },
      beforeMount(){
      },
      watch: {
        number(newValue, oldValue) {
          console.log(oldValue)
          console.log(newValue)
      }
      },
      components: {comtest2:test02},
      //props: ['name'],
      
}
</script>

<style>

</style>

子组件

<template>
  <div>
      {{name}}
  </div>
</template>

<script>
// import animated from 'animate.css' 
export default {
      data() {
      return {
          msg: "我是子组件的msg"
      }
      },
      methods:{ 
      }, 
      beforeMount(){
      },
      mounted(){
          this.$emit('func',this.msg)
          console.log(this.name)
      },
      watch: {
      },
    //   props: ['name'],
      props: {
          'name': String
      },
}
</script>

<style>

</style>