vue2-----vue2父子传值(父传子，子传父)

1.父传子

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

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

1)父组件

<template>
  <div class="home">
    <!-- 就算要传的值是字符串，甚至一个数，也要绑定变量，然后给这个绑定的变量赋值 -->
    <!-- :msg='1' 直接把要传的值赋进去不生效 -->
    <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:{
        type: String,
        required: true,
    }
  },
  data(){
    return{
    }
  }
});
</script>
 
<style scoped>
</style>

2.子传父

1)子组件

<template>
  <div class="hello">
    <el-button size = "mini" type="primary" @click="handleClick">点击触发</el-button>
  </div>
</template>
 
<script>
export default({
  data(){
    return{
    }
  },
  methods: {
    handleClick(){
      this.$emit("handle", {
           user: res.user,
           title: res.title,
           time: [res.start_date, res.end_date],
           party_branch_id: res.party_branch_id,
           content: content,
           img_url: res.img_url,
       });
    }
  },
});
</script>
 
<style scoped>
</style>

2)父组件

<template>
  <div class="home">
    <HelloWorld  @handle="set_ruleForm"></HelloWorld>
  </div>
</template>
 
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default({
  components:{
    HelloWorld
  },
  data(){
    return{
      title:'子传父'
    }
  },
  methods: {
    set_ruleForm(ruleForm) {//ruleForm就是传过来的对象
       if(this.ruleForm.name){
          ruleForm.name = this.ruleForm.name;
       }
       this.ruleForm = ruleForm;
       if (ruleForm.img_url) {
           const img_name = ruleForm.img_url.split("/")[1];
           this.fileList.push({ name: img_name, url: JSON.parse(window.localStorage.getItem('config')).requestHot + "/" + ruleForm.img_url });
       }
     },
  },
});
</script>