vue父子通讯

前言

父子通讯在vue的项目里面有提到过并且也有很细的解释但是还是觉得有必要单独写一个

一、父组件向子组件传递数据

1.通过props进行传递
2.子组件不应该直接修改父组件传递过来的属性

<template>
  <div>
    <!-- <Form title="添加电影"></Form> -->
    <Form :title="title"></Form>
  </div>
</template>

<script>
// 加载Form组件
import Form from "./components/Form";
export default {
  data() {
    return {
      title: "添加电影"
    };
  },
  // 注册组件
  components: {
    Form
  }
};
</script>

<style>
</style>

// 子组件
<template>
  <div>
    <h3>{{title}} {{msg}}</h3>
    <p>
      <span>用户名:</span>
      <input type="text">
    </p>
  </div>
</template>

<script>
export default {
  // 避免修改从父组件传过来的属性
  props: ["title"],
  data() {
    return {
      msg: "hahaha2"
    };
  },
  created() {
    console.log(this.title);
    console.log(this.msg);
    // this.title = "我是新标题";
    this.msg = "xxxxxx";
  }
};
</script>

<style>
</style>

二、子组件向父组件传递数据

1.在父组件自定义事件getUsername,并绑定处理方法receiveUsername
2.在需要的时候,在子组件内触发父组件的自定义事件在父组件自定义事件getUsername并带上数据
3.父组件自定义事件在父组件自定义事件getUsername被触发,对应的处理方法并绑定处理方法receiveUsername被执行,并接收到子组件传过来的数据

// 父组件
<template>
  <div>
    <Form @getUsername="receiveUsername"></Form>
  </div>
</template>

<script>
// 加载Form组件
import Form from "./components/Form";
export default {
  data() {
    return {
      
    };
  },
  // 注册组件
  components: {
    Form
  },

  methods: {
      // 接收子组件传递过来的用户名
    receiveUsername(data) {
      console.log(data);
    }
  }
};
</script>

// 子组件
<template>
  <div style="border: 1px solid;">
    <p>
      <span>用户名:</span>
      <input type="text" v-model="username">
      <button @click="submit">传数据</button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "胡儒清"
    };
  },
  created() {
    // 子组件触发父组件的自定义事件 getUsername
    this.$emit("getUsername", this.username);
  },

  methods: {
    submit() {
      // 也可以通过点击事件来触发
      this.$emit("getUsername", this.username);
    }
  }
};
</script>

三、父子组件双向绑定

父组件数据和自组件数据同步,利用了引用对象存储特性

// 父组件
<template>
  <div>
    <p>这是父组件title的值 {{obj.title}}</p>
    <Form :obj="obj"></Form>
  </div>
</template>

<script>
import Form from "./components/Form";
export default {
  data() {
    return {
      obj: {
        title: "web前端攻城狮"
      }
    };
  },
  components: {
    Form
  }
};
</script>

// 子组件
<template>
  <div style="border: 1px solid;">
    这里是子组件
    <input type="text" v-model="obj.title">
  </div>
</template>

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