Loading

Vue组件（二） 通信

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

1、父组件通过props向子组件传递数据

在vue中，子组件是不能引用父组件或者是Vue实例的数据的

但是在开发中，往往有一些数据需要从上层传递到下层：

那么如何进行父子组件间的通信呢？

通过props向子组件传递数据

通过事件向父组件

clipboard


2、demo演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>

<template id="cpn">
  <div>
    <p>{{cmovies}}</p>
    <h2>{{cmessage}}</h2>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  const cpn = {
    template: "#cpn",
    /*props: ['cmovies', 'cmessage'],*/
    props: {
      //1、类型限制
      /*cmovies: Array,  //可以对数据做一些验证，表示cmovies必须是数组类型
      cmessage: String*/

      //2、提供一些默认值
      cmessage: {
        type: String,
        default: '后臣',
        required: true   //父组件在使用这个组件时，必须要传值
      },
      cmovies: {
        type: Array,
        default: []  //
      }
    },
    data: function () {
      return {}
    }
  }

  const app = new Vue({
    el: "#app", //用于挂载要管理的元素
    data: {   //定义数据
      message: 'hello',
      movies: ['海王','火影忍者','柯南']
    },
    components: {
      'cpn': cpn
    }
  })
</script>
</body>
</html>


3、props驼峰标识

// 父组件使用子组件
<cpn :c-info="info"></cpn>

//子组件接收的数据
props: {
  cInfo: {
    type: Object,
    default(){
      return {}
    }
  }
}


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

1、子组件通过自定义事件向父组件传递数据

<!--父组件模板-->
<div id="app">
  <!--父组件监听子组件发射出来的事件 itemClick-->
  <!--cpnClick: 对子组件发射出来的事件进行处理 -->
  <!--<cpn v-on:itemClick="cpnClick"></cpn>-->
  <cpn @itemclick="cpnClick"></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>


<script>
  //1、子组件
  const cpn = {
    template: '#cpn',
    data(){
      return{
        categories: [
          {id: 1,name: '热门推荐'},
          {id: 1,name: '手机数码'},
          {id: 1,name: '家具家电'},
          {id: 1,name: '电脑办公'}
        ]
      }
    },
    methods: {
      btnClick(item){
        //子组件发射这个事件
        this.$emit('itemclick',item);
      }
    }
  }

  //2、相当于父组件
  const app = new Vue({
    el: "#app", //用于挂载要管理的元素
    data: {   //定义数据
      message: 'hello',
    },
    methods: {
      cpnClick(item){
        console.log("cpnClick",item)
      }
    },
    components: {
      cpn
    }

  })
</script>


3、父子组件的访问方式

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者子组件直接访问根组件

父组件访问子组件：$children 或者 $refs

//1、$children : 在父组件中通过$children来获取子组件
/*console.log(this.$children);
this.$children[0].showMessage();*/

//2、$refs
//this.$refs默认是空的对象,必须在使用的组件上加 ref="aaa"
console.log(this.$refs.aaa);


子组件访问父组件：$parent

//1、访问父组件
console.log(this.$parent);

//2、访问Vue实例
console.log(this.$root.message);
posted @ 2021-03-10 21:34  青岑  阅读(85)  评论(0)    收藏  举报