vue组件之间的数据通信

1、通过路由带参数传值

①定义路由时加上参数props: true，在定义路由路径时要留有参数占位符: name『用法: to="'路径/'＋value"』

②在跳转到的页面加上参数props:['name']

③在跳转到的页面就获取到了name[用法: js中直接this. name；html中直接插值{{ name}}]

2、父组件向子组件传值

①父组件内设置要传的数据『data(){ id: value}』

②在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上『< myBtn :atrid='id'></ mybtn>』

③在子组件添加参数props:['atrid'],即可

3、子组件向父组件传值

①由于父组件需要参数，所以在父组件中的标签上定义自定义事件，在事件内部获取参数；『@myEvent=" callback"在callback函数中接收参数』

②在子组件中触发自定义事件，并传参。『this.$ emit('父组件中的自定义事件',参数)』

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。

一般来说，组件可以有以下几种关系：

 A和B 、  B和C、B和D都是父子关系，C和D是兄弟关系，A和CD是隔代关系

props 

父组件A通过props的方式向子组件B传递，B to A 通过在B组件中$emit, A 组件中v-on的方式实现。

1. 父组件向子组件传值

// Parent.vue 父组件
<template>
  <div id="app">
    <Children :users="users"></Children>
  </div>
</template>

<script>
  import Children from './Children'
  export default {
    name: "Parent",
    components: {
      Children
    },
    data() {
      return {
        users: ['aa','bb','zy']
      }
    }
  }
</script>

<style scoped>

</style>

// 子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>// 遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>

<script>
  export default {
    name: "children",
    props:{
      users: {
        type: Array,
        required: true
      }
    }
  }
</script>

<style scoped>

</style>

父组件通过props 向下传递数据给子组件。

注意：组件中的数据共有三种形式： data、props、computed

2. 子组件向父组件传值（通过事件形式）$emit

// 子组件 children.vue
<template>
  <div class="hello">
<!--    <ul>-->
<!--      <li v-for="user in users">{{user}} 我问问</li>// 遍历传递过来的值，然后呈现到页面-->
<!--    </ul>-->

    <button @click="toParamParent">子向父传值</button>
  </div>
</template>

<script>
  export default {
    name: "children",
    // props:{
    //   users: {
    //     type: Array,
    //     required: true
    //   }
    // },
    methods: {
      toParamParent() {
        this.$emit('childrenToParent','lalala')
      }
    }
  }
</script>

<style scoped>

</style>

// 父组件
<template>
  <div id="app">
<!--    <Children :users="users"></Children>-->
    <Children @childrenToParent="updateHtml"></Children>
    <h1>{{title}}</h1>
    <h2>{{childrenParam}}</h2>

  </div>
</template>

<script>
  import Children from './Children'
  export default {
    name: "Parent",
    components: {
      Children
    },
    data() {
      return {
        users: ['aa','bb','cc'],
        title: '触发button, 子组件传递数据',
        childrenParam: ''
      }
    },
    methods: {
      updateHtml(e){
        // console.log(e)  e是传递过来的数据 'ni hao mimi'
        this.childrenParam = e
      }
    }
  }
</script>

<style scoped>

</style>

总结： 子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件