【Vue】学习笔记-组件传值

前言

组件之间的传值可以分为三种：

1.父级向子级传递数据

2.子级向父级传递数据

3.非父子级传递数据

本文主要讲解父级向子级传递数据和子级向父级传递数据这两种

1.父级向子级传递数据

父级向子级传递数据：使用属性传递
1）在App组件中，绑定msg属性传递给Child内部（:msg=“message”）data()中message:“app.vue data”

2）Child获取信息用props：[“msg”]（数组字符串，msg为App组件传的组件名）

3）Child中template绑定表达式msg

App.vue代码为：

<template>
  <div>
    <h1>hello world</h1>
    <child :msg="message"></child>
  </div>
</template>
<script>
//父级向子级传递数据：使用属性传递
import Child from "./components/Child.vue"
export default {
  //注册组件
  components:{
    Child
  },
  data(){
    return{
      message:"app.vue data"
    }
  },
  methods:{
  }
}
</script>

Child.vue代码为：

<template>
  <div>
      <h1>我是Child组件</h1>
      <h1>{{msg}}</h1>
  </div>
 
</template>

<script>
export default {
    props:["msg"]
}
</script>

2.子级向父级传递数据

子级向父级传递数据：用自定义事件
子级中建立一个组件button，点击button后，把子级的message数据传给父级，然后父级的hello world变成子级的数据
详细步骤：
1）在父级App.vue中的中先自定义一个事件 @myevent=“changeData"然后在methods里定义一个changeData()方法把hello变成子级的数据，h1中为childData，在methods中定义data中初始值为childData:”"，用changeData()获取子级的数据

2）在Child中触发事件,Child.vue中写sendData()方法，在Child.vue中button点击click执行sendData来实现传递数据，在sendData中用 this.$emit 方法可以触发父级的自定义事件，this.$emit("myevent"),在子级中data()返回childData数据为"I’m child".同时this.$emit("myevent"，this.childData)把数据传给myevent

3）在App.vue中myevent调用的是changeData在方法中changeData(childData){this.childData = childData}

4)点击子级按钮“传递数据”父级标签出现"I’m child"
父级App.vue代码如下

<template>
  <div>
    <h1>{{childData}}</h1>
    <child @myevent="changeData" :msg="message"></child>
  </div>
</template>
<script>
//父级向子级传递数据：使用属性传递
import Child from "./components/Child.vue"
export default {
  //注册组件
  components:{
    Child
  },
  data(){
    return{
      message:"app.vue data",
      childData:''
    }
  },
  methods:{
    changeData(childData){
      this.childData=childData;
    }
  }
}
</script>

子级Child.vue代码如下

<template>
  <div>
      <h1>我是Child组件</h1>
      <h1>{{msg}}</h1>
      <button @click="sendData">传递数据</button>
  </div>
 
</template>

<script>
//子级向父级传递数据：用自定义事件
export default {
    props:["msg"],
    data(){
        return{
            childData:"I'm child"
        }
    },
    methods: {
        sendData(){
            this.$emit("myevent",this.childData)
        }
    },
}
</script>

显示结果：

点击传递数据，出现I’m child

常见错误总结

父级向子级传递数据时child的标签要写在APP.vue组件中，写在Child.vue中会报错如下：