vue 的组件与父子组件传值知识点

组件化
组件化就是一种拆解复杂问题的思路，一般是将复杂的页面拆解成一个个小的可复用的组件，方便组织和管理，扩展性强。
组件的使用步骤：
1.创建组件构造器 Vue.extend()
2.注册组件 Vue.component()
3.使用组件实例作用范围使用

image.png

    <div id="app1">
        <!-- 3.在实例作用范围使用 -->
        <cpn></cpn>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //1. 创建组件构造器
        const cpn = Vue.extend({
            template: `
          <div>
           <h2>我是标题</h2>
           <p>我是组件中的内容</p>
          </div>
           `
        })
        // 2.注册组件
        Vue.component('cpn', cpn)// 全局组件

        const app = new Vue({
            el: '#app1',
        })

    </script>

</body>

为什么组件中的data只能是函数

<body>

  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>{{counter}}</h2>
      <button @click="btnClick">按钮</button>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const obj = {
      counter: 0
    }

    const app = new Vue({
      el: '#app',
      components: {
        'cpn': {
          template: '#cpn',
          data() {// 当data（）为函数时 每个<cpn></cpn> 中的count 是独立的，
若data{}.每个 <cpn></cpn>中的count都指向data中的count，
只要改变其中一个所有的都会改变
            return {
              counter: 0
            }
          },
          methods: {
            btnClick() {
              this.counter++
            }
          }
        }
      }
    })
  </script>
</body>

父子组件传递数据
通过props向子组件传递数据
通过事件向父组件发送消息

image.png

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

image.png

注意点：props中的驼峰表示要使用'-'将大写转换成小写连接起来

image.png

子组件通过事件向父组件发送消息

image.png

一般props的值只能由父组件传过来的值进行改变。子组件不能修改，且一般input的v-model的value都是放在data(),错在value值放到props的中

image.png

解决方案

image.png

实现子组件输入框输入的值改变父子组件原来的值

image.png

父子组件的访问方式： $children

父组件访问子组件：使用 $children或$ refs
子组件访问父组件：使用$parent

我们先来看下 $children的访问 this.$ children是一个数组类型，它包含所有子组件对象。
我们这里通过一个遍历，取出所有子组件的message状态。

image.png

$refs的使用：

$refs和ref指令通常是一起使用的。

首先，我们通过ref给某一个子组件绑定一个特定的ID。
其次，通过this.$refs.ID就可以访问到该组件了。

非父子组件通信
刚才我们讨论的都是父子组件间的通信，那如果是非父子关系呢?
非父子组件关系包括多个层级的组件，也包括兄弟组件的关系。
在Vue2.x中，有一种方案是通过中央事件总线，也就是一个中介来完成。
但是这种方案和直接使用Vuex的状态管理方案还是逊色很多。
并且Vuex提供了更多好用的功能，所以这里我们暂且不讨论这种方案，后续我们专门学习Vuex的状态管理。