vue的生命周期,父子组件通信

vue的生命周期

图片来自vue官网

// 数据开始创建之前
beforeCreate() {
   // 此时页面没有出来 也没有数据 
    console.log("beforeCreate",this.$el, this.$data)
},
// 数据创建之后
created() {
    // 此时数据出来了 但是页面没有出来
    // 通常获取数据和请求数据的工作在里完成 比如向后台请求ajax向后台获取数据
     console.log("created",this.$el, this.$data)
},
// 页面未渲染
beforeMount() {
    // 此时页面模板已经出来了，还没有渲染页面
      console.log("1.beforeMount",this.$el, this.$data)
},
// 页面渲染完成
mounted() {
    //  此时页面模板已经出来了，页面渲染完毕
    // 通常操作DOM信息在这里完成
    console.log("2.mounted",this.$el, this.$data)
},
// 在修改数据之前
beforeUpdate() {
     console.log("3.beforeUpdated",this.$el, this.$data)
},
// 在修改数据完成
updated() {
     console.log("4.updated",this.$el, this.$data)
},
// 销毁之前
beforeDestroy() {
     console.log("5.beforeDestroy",this.$el, this.$data)
},
// 销毁完成
destroyed() {
    console.log("6.destroyed",this.$el, this.$data)
},

vue父组件怎么向子组件传递数据

1.props:

子组件的 props 选项能够接收来自父组件数据。仅仅只能接收，props是单向绑定的

- 静态的值 props

父组件 :传递msg值

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- 传递msg值 -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

子组件 props: { msg: String } 接收父组件传过来的值

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}

- 动态传值 props

父组件 动态绑定msg

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- 传递msg值 -->
    <!-- 语法糖写法 -->
    <HelloWorld :msg="msg" />
    <HelloWorld v-bind:msg="msg" />
  </div>
</template>

<script>
  // @ is an alias to /src
  import HelloWorld from '@/components/HelloWorld.vue'

  export default {
    name: 'Home',
    components: {
      HelloWorld
    },
    data() {
      return {
        msg: "Welcome to Your Vue.js App"
      }
    },
  }
</script>

子组件 接收msg值 props: {msg: String }

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

2.$ref

ref 官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例

通俗的讲，ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例
原文链接：https://blog.csdn.net/qq_42755530/article/details/107177243
父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld ref="msg" />
  </div>
</template>

<script>
  // @ is an alias to /src
  import HelloWorld from '@/components/HelloWorld.vue'

  export default {
    name: 'Home',
    components: {
      HelloWorld
    },
    data() {
      return {
        // msg: "Welcome to Your Vue.js App"
      }
    },
    mounted() {
      console.log(this.$refs);
      // console.log(this.$refs.msg);
      this.$refs.msg.getMessage('我是子组件Helloword！')
    },
  }
</script>

子组件

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
 data() {
    return {
      message:''
    }
  },
  methods: {
    getMessage(m) {
      this.message = m;
    }
  }
}
</script>

子向父传递数据

3.$ emit

子组件可以使用 $emit 触发父组件的自定义事件。
父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>{{title}}</h1>
    <HelloWorld @getMessage="showMsg" />
  </div>
</template>

<script>
  // @ is an alias to /src
  import HelloWorld from '@/components/HelloWorld.vue'

  export default {
    components: {
      HelloWorld
    },
    data() {
      return {
        title: ''
      }
    },
    methods: {
      showMsg(title) {
        console.log(title);
        this.title = title;
      }
    }

  }
</script>

子组件

<template>
  <div class="hello">
    <h1>1111</h1>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$emit("getMessage", "woshinidie")
    },
  }
</script>