父子组件之间传值

• $emit()
• $on() $emit()
• this.$parent.xxx

正常的@xxx=“func” , this.$emit()方式

• 使用.sync可以给props双向绑定数据

• 由子组件自己控制何时传值

  父亲组件

  <template>
    <div>
      <p style="color: red;">使用.sync双向绑定</p>
      父组件输入框：<input v-model="inputValue" /> 父组件值：{
       {
        inputValue }}
      <hr />
      <child :fatherInput.sync="inputValue"></child>
    </div>
  </template>
  <script>
  import child from "./child";
  
  export default {
       
    components: {
       
      child,
    },
    data() {
       
      return {
       
        inputValue: ""
      };
    }
  };
  </script>
  
  

  儿子组件

  <template>
    <div>
      引用子组件：<input v-model="childInput" /> 父组件传递的值：
      {
       {
        fatherInput }}
    </div>
  </template>
  <script>
  export default {
       
    props: {
       
      fatherInput: {
       
        type: String,
        default: function() {
       
          return null;
        }
      }
    },
    data() {
       
      return {
       
        childInput: ""
      };
    },
    watch: {
       
      fatherInput: function() {
       
        // 监听父组件传递过来的值
        if (this.fatherInput !== null) {
       
          // 如果父组件传递了值，我们就把值赋给子组件的输入框
          this.childInput = this.fatherInput;