Vue-Cli父子组件通信方法

Vue-Cli父子组件通信方法

1.父传子（父组件自定义属性）

• 父组件

  <template>
    <div>
  <!--冒号后面的名称是自己定义的，这个名字对应子组件接收的属性名，后面是父组件要传过去的值-->
      <child :attrtitle="title" :age="age"  />
    </div>
  </template>
  
  <script>
  // 引入对应的组件
  import child from './components/child.vue'
  export default {
    components: {//引入组件后一定要在这里声明才能用
      child
    },
    data() {
      return {
        title: '我是一个显示的内容',//要传给子组件的值
        age: 100
      }
    },
  }
  </script>
  <style lang="scss" scoped></style>
  

• 子组件

   <template>
    <div>
      <div>{{ attrtitle }} -我是由父组件传过来的值- {{ age }}</div>
    </div>
  </template>
  
  <script>
  export default {
    props: {//用props接收，此处声明的对象名相当于data中的声明，但是二者不可冲突
      attrtitle: {//父组件定义的属性名
        type: String,//接收属性值的类型
        default: '我是一个字符串'//如果父组件没有传值，设置默认值
      },
      age: {
        type: Number,
        default: 10,
        validator: value => {//对父组件传过来的值进行过滤筛选并抛错
          if (value > 100) {
            // throw new Error('值大于90')
            return false
          }
          return true
        }
      },
    },
  }
  </script>
  <style lang="scss" scoped></style>
  

  另一种prop传值，直接使用数组:props['属性名1','属性名2']
  

2.子传父（子组件自定义事件）

• 父组件

  <template>
    <div>
      <h3 class="title">App组件</h3>
      <hr />
      <!-- 
        这里的@onSetAge的onSetAge是子组件中$emit中定义的方法名
        等号后面跟的是要在父组件中的哪个方法使用 这里为setAge
        此处不需要加括号 在setAge中添加形参即可
       -->
      <child @onSetAge="setAge" />
    </div>
  </template>
  
  <script>
  import child from './components/child.vue'
  export default {
    components: {
      child
    },
    data() {
      return {
        age: 100
      }
    },
    methods: {
      setAge(n) {
        this.age = n
      }
    }
  }
  </script>
  <style lang="scss" scoped></style>
  
  

• 子组件

  <template>
    <div>
     <!-- 
  		单击这个按钮会触发点击事件 执行$emit函数，向父组件传递方法并带参
       -->
      <button @click="addAge">+++++</button>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      addAge() {
        // 通过给当前的组件定义一个自定义的事件,完成子向父
        // 参数1:自定义事件的名称,参数2：传过去的数据 可以有一个或多个
        // this.$emit('onSetAge',......参数)
        this.$emit('onSetAge', 10)
      }
    }
  }
  </script>
  <style lang="scss" scoped></style>
  
  

3.父子互传（ref绑定）

• 父组件

  <template>
    <div>
      <!-- 
        ref 实现组件通信
        如果ref绑定在自定义组件上,可以得到当前组件实例对象（属性及方法）
       -->
      <child ref="childRef" />
      <button @click="getChild">父获取child组件中的数据</button>
    </div>
  </template>
  
  <script>
  import child from './components/child.vue'
  export default {
    components: {
      child
    },
    data() {
      return {
        age: 100,
        ptitle: ''
      }
    },
    methods: {
      getChild() {
     	  //this.$refs.childRef 获取绑定的子组件实例，setTitle是子组件中的方法，可以直接调用
        this.ptitle = this.$refs.childRef.setTitle('我是父组件调用子组件方法并传入的值')
      }
    },
    mounted(){
      //可以直接获取子组件data中的title变量
      this.ptitle = this.$refs.childRef.title
    }
  }
  </script>
  <style lang="scss" scoped></style>
  

• 子组件

  <template>
    <div>
      <h3>child组件</h3>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        title: '我是child组件中的数据'   	//父组件可以通过ref来获取这里
      }
    },
    methods: {
      setTitle(title) {  	 //父组件可以通过ref来获取这里
        this.title = title+'#####3'
        return this.title
      }
    }
  }
  </script>
  
  <style lang="scss" scoped></style>
  

4.父子传值（v-model）

• 父组件

  <template>
    <div>
      <!--
        v-model它是一个语法糖，它是 value和事件[input[默认]]的集合体
        这里将title变量绑定倒input中并传入了子组件 
       -->
      <input type="text" v-model="title" /> 
        <!--在父组件中 v-model后跟随自定义的属性名 它决定了子组件接收的名称 -->
      <child v-model:titles="title" />
    </div>
  </template>
  
  <script>
  import child from './components/child.vue'
  export default {
    components: {
      child
    },
    data() {
      return {
        title: '我是父组件的title'
      }
    },
  }
  </script>
  <style lang="scss" scoped></style>
  

• 子组件

  <template>
    <div>
     <!--
       这里给子组件的input添加动态的value 其值为接收的titles变量
      -->
      <input type="text" :value="titles" />
    </div>
  </template>
  
  <script>
  export default {
       model: {//使用model方法，prop为接收的属性名，在这里可直接当作变量使用
              prop: 'titles',
              event: 'change'
         },
  };
  </script>
  <style lang="scss" scoped></style>
  

  ​