vue2父子组件传值

1.父传子

父传子：主要是在父组件引入子组件，将要传值的值绑定指定的属性上如

然后在子组件用props接收即可在页面展示

1.父组件

<template>
  <div class="home">
    <HelloWorld :msg = title></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default({
  components:{
    HelloWorld
  },
  data(){
    return{
      title:'父传子'
    }
  }
});
</script>

2.子组件

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

<script>
export default({
  props:{
    msg:String
  },
  data(){
    return{
    }
  }
});
</script>

<style scoped>
</style>

2.子传父

1.父组件

<template>
  <div class="home">
    <HelloWorld :msg = title v-on:child_string_parent="child_string_parent"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default({
  components:{
    HelloWorld
  },
  data(){
    return{
      title:'父传子'
    }
  },
  methods: {
    child_string_parent(_row){
      console.log('_row=>',_row)
    }
  },
});
</script>

2.子组件

<template>
  <div class="hello">
    <span>{{msg}}</span>
    <br>
    <el-button size = "mini" type="primary" @click="click_trigger">点击触发</el-button>
  </div>
</template>

<script>
export default({
  props:{
    msg:String
  },
  data(){
    return{
      child_string_parent:'子传父'
    }
  },
  methods: {
    click_trigger(){
      this.$emit("child_string_parent",this.child_string_parent)
    }
  },
});
</script>

<style scoped>
</style>