什么是VUE的父组件和子组件？那么父组件和子组件又是怎样传值的呢？

街头嗳昧℡

于 2021-11-24 10:58:27 发布

阅读量419

点赞数 1

分类专栏：父组件子组件什么是父组件子组件父组件向子组件传值文章标签： vue

本文链接：https://blog.csdn.net/m0_58845957/article/details/121510150

版权

本文介绍了Vue中父组件与子组件的概念，通过实例展示了如何创建子组件并在父组件中引用。父组件通过props将值传递给子组件，子组件则通过触发父组件的方法来传递值。同时，父组件可以使用ref属性来调用子组件的方法。

摘要由CSDN通过智能技术生成

有时候我们经常分不清什么是父组件，什么又是子组件。现在来简单说下：我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。以上是我个人的理解含义，那么现在就直接上代码吧！

子组件：

<template>
  <div>
    {
  {msg}}
  </div>
  <p>{
  {hello}}</p>
  <p>{
  {hellotests}}</p>
  <button @click="btns">按钮</button>
</template>
<script>
export default{
  data(){
    return{
　　　// 子组件中声明的变量
      msg:'',
      hello:'',
      hellotests:''
    }
  },
  created(){
 
  },
  watch:{
    // 监听从父组件传过来的数据是否发生改变，然后赋值给变量
    CCCount() {
      this.msg = this.msgTest
      this.hello = this.helloTest
    }
  },
  methods:{
    // 点击按钮，子组件操做父组件中的函数
    btns(){
      this.$emit('childsClick', '子组件触发父组件中的函数')
    },
    //　被父组件调用的子组件函数    
    msgs1(){
      this.hellotests = '哈哈，我是父组件调用子组