vue中父子组件的传值

1. 父组件给子组件传值
主要两个步骤：
1. 在父组件调用子组件的时候绑定数据
2. 在子组件里面通过props接收父组件传过来的数据

2. 子组件给父组件传值
主要三个步骤：
1.在子组件中创建一个按钮，给按钮绑定一个点击事件
2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数。
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法。

看代码：

首先看父组件：

<template>
  <div class="Father">
    <h1>这是一个父组件</h1>
    
    <!-- 父组件给子组件传值->
    <div class="div1">
        <el-input v-model="name" placeholder="请输入名字"></el-input>
        <Child :acceptName='name'></Child>
    </div>
    <div class="div1">
        <!-- 相同的子组件之间互不影响 -->
        <Child :acceptName='"小明"'></Child>
    </div>

    <!-- 子组件给父组件传值 -->
    <div class="div2">
        <NewChild @acceptFromChild1="handleFather($event)"></NewChild>
         {{ childDetails }}
    </div>
  </div>
</template>
<script>
import Child from '@/components/Child.vue'
import NewChild from '@/components/NewChild.vue'
export default {
    data(){
        return{
            name: '',
            childDetails: null,
        }
    },
    components:{
        Child,
        NewChild,
    },
    methods:{
        handleFather(child){
            this.childDetails = child
        }
    }
    
}
</script>

然后，看接收父组件传值的子组件Child—父组件给子组件传值

<template>
  <div class="child">
    <h3>这是一个Child子组件</h3>
    <el-button type="primary" @click="handleClick" plain>这是{{ acceptName }}的第{{ count }}次点击</el-button>
  </div>
</template>
<script>
export default {
  // 接收父组件传过来的值，props是一个" 数组类型 "或" 对象类型 "
  props: [
    "acceptName"
  ],
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick() {
      this.count++;
    },
  },
};
</script>
<style scoped>
.child{
  width: 300px;
  height: 300px;
  background: pink;
}
</style>

我在这个子组件中设置了一个点击方法，并在父组件中调用了两次Child，能够看到，这两个Child组件是互不影响的。且和input绑定的Child组件接收父组件的传值和input值得变化是同步的，并不是在input离焦之后才传的。
效果：

然后，看给父组件传值的子组件NewChild—子组件给父组件传值

<template>
  <div class="newChild">
    <h3>NewChild:子组件传值给父组件</h3>
    <el-button type="primary" @click="handleChild" plain>传值给父组件</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      child:{
        name: "TOM",
        age: 3,
        desc: "我的存在，是为了测试，能不能成功将值从子组件传递到父组件"
      }
    };
  },
  methods: {
    // 方法里面传值给父组件
    handleChild() {
      this.$emit('acceptFromChild1',this.child)
    },
  },
};
</script>
<style scoped>
.newChild{
  width: 300px;
  height: 300px;
  background: yellow;
}
</style>

效果：