vue 父子组件传值

1.父组件向子组件传值

props中定义子组件接收参数

title、contain定义类型以及默认值

//子组件child
<template>
  <div class="child-contain">
    <div>{{msg}}</div>
    <div>{{title}}</div>
    <div>{{contain}}</div>
  </div>
</template>

<script>
export default {
  name: "child",
  data(){
    return{
      msg:'这里是子组件'
    }
  },
  props:{
    title:{
      type:String,
      default:'子组件默认的标题'
    },
    contain:{
      type:String,
      default: '子组件默认的内容，当父组件不传值时会和默认的标题一起显示'
    }
  }
}
</script>

<style scoped>
</style>

在父组件中调用

因为父组件没有传参，所以展示的是子组件default默认的值

<template>
  <div class="parent">
//调用子组件
    <child></child>
  </div>
</template>

<script>
//引入子组件
import Child from "../components/child";
export default {
//声明子组件
  components:{
    Child
  },
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style scoped>
</style>

父组件传参，传递的参数需要和子组件props中定义的名称一样

第一种调用方法

<template>
  <div class="parent">
//调用子组件
    <child title="父组件传的标题参数" contain="父组件传的内容参数"></child>
  </div>
</template>

<script>
//引入子组件
import Child from "../components/child";
export default {
  //声明子组件
  components:{
    Child
  },
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style scoped>
</style>

第二种调用方法，也是和上面相同的调用效果

<template>
  <div class="parent">
//调用子组件
    <child :title=parentTitle :contain=parentContain></child>
  </div>
</template>

<script>
//引入子组件
import Child from "../components/child";
export default {
  //声明子组件
  components:{
    Child
  },
  data() {
    return {
      parentTitle:'父组件传的标题参数',
      parentContain:'父组件传的内容参数',
    }
  },
  methods: {
  }
}
</script>

<style scoped>
</style>

2.子组件向父组件传参 使用$emit事件

实现

当输入框修改信息时，点击按钮，下方信息也会相应改变

//子组件child.vue
<template>
  <div class="child-contain">
    <input v-model="msg">
    <button @click="click">点击传参</button>
  </div>
</template>

<script>
export default {
  name: "child",
  data(){
    return{
      msg:'来自子组件的信息',
    }
  },
  methods:{
    click(){
      //通过emit，定义当按钮触发时触发事件将参数传给父组件
      this.$emit('childFn', this.msg);
    }
  }
}
</script>

<style scoped>

</style>

<template>
  <div class="parent">
    <child @childFn="parentFn"></child>
    子组件传过来的参数:{{message}}
  </div>
</template>
<script>
import Child from "../components/child";
export default {
  components:{
    Child
  },
  data() {
    return {
      message:''
    }
  },
  methods: {
    //名字需要和emit中定义的一样
    parentFn(childMes){
      this.message = childMes
    },
  }
}
</script>

<style scoped>

</style>