Communication between components

Description

不同组件之间通信(传递信息)以及父子组件之间访问data中数据

不同组件间传递信息

1.动态路由

携带单个信息点，以路由形式/home/userid显示在url中

路由部分

{
    // 动态路由 实现 携带信息(单个信息，以路由形式 且显示在url中) 跳转组件
    path: '/home/:id',
    component: Home
},

信源JS

const r = this.$router;
const id = this.username;

r.push('/home/' + id)

信宿JS

data() {
  return {
      id: this.$route.params.id
  }
},

信宿html

<h1>Welcome, {{$route.params.id}}!</h1>

2.query

携带一组信息，以query形式/home?id=useri显示在url中

路由部分

{
    // 传递query对象 实现 携带信息(可大量信息，以query形式 显示在url中) 跳转组件
    path: '/home',
    component: Home
},

信源JS

const r = this.$router;
const id = this.username;

r.push({
  path: '/home',
  query: {
    id
  }
})

信宿JS

data() {
  return {
      id: this.$route.query.id
  }
},

信宿html

<h1>Welcome, {{$route.query.id}}</h1>

父子组件互相访问data中的数据

//子->父
this.$parent
this.$parent.id
this.$root
this.$root.id

//父->子
this.$children
this.$children[0]
this.$children[0].id
this.$refs
this.$refs.nav_bar
this.$refs.nav_bar.id

<nav-bar ref="nav_bar"></nav-bar>

一个父组件有许多子组件，所以this.$children可遍历

一个子组件仅有一个活跃的父组件，所以this.$parent是唯一的

父子组件通信又不一样

父 -> 子 props属性(properties)

子 -> 父 发送事件

注意此处有 “-“与 “驼峰” item-click与itemClick

<cpn :cmovies="movies" :cmessage="message"></cpn>

props: {
      //(1)类型限制
      // cmovies: Array,
      // cmessage: String

      //(2)提供 默认值、必传值
      cmessage: {
        type: String,                   //这里的类型可以是自定义类型
        //type: [String, Number],       多个可能的类型
        default: 'fireworks',
        required: true
        //还可以添加自定义验证函数validator
      },
      //类型是对象或数组时，默认值必须是一个函数
      cmovies: {
        type: Array,
        default() {
          return []
        }
      }
    }

// 子组件
methods: {
      btnClick(item) {
        console.log(item.name);
        //向父组件发射的事件的名称(父组件所监听的事件名称)
        // this.$emit('itemClick') 这里用驼峰的话上面不行
        this.$emit('item-click', item)
      }
    }

// 父组件 监听btnClick事件
<button v-for="item in categories"
            @click="btnClick(item)">
      {{item.name}}
    </button>