关于Vue父子组件传值之watch运用

Posted 2023-03-19

参考技术A 大多数父组件往子组件传值的情景都是：

父组件传值—>子组件通过props接收父组件传值—>子组件通过插值表达式Value去显示值

但是！！总会有不同的情景出现！
当我在使用element组件库时候就遇到了如下情况：

一个很简单的表单组件，但是它的数据显示是通过model属性绑定的，因而这里我们不能去使用表达式去处理了。一开始我想，那也很简单啊，你不是要绑定值吗，我在data里去写一个form值，然后再给这个form绑定上父组件传来的值不就完事了嘛。看上去是可行的，但是，事实往往不遂人意，这样是行不通的。原因是，data属性只是一个初始值，并不会实现数据绑定的效果，因此我这种妄图通过data实现父子组件值绑定的思路破产了。

下面是正解(通过watch:监听器实现)：

ps：更好的方法可以通过计算属性computed去实现同样的效果，从性能上较优
欢迎大家纠错和讨论。

Vue组件声明和传值（父子+非父子）

前言

组件就是可复用的vue实例，各自都有名字。

一、全局组件

Vue.component(‘my-component-name‘, {
  // ... 选项 ...
})

全局组件一经声明就在全局注册了，就可以在任意Vue根实例中使用，全局组件作为子组件可以互相使用。
选项可以写data、methods、computed、watch等等，el不可以写。

注意：

1. 组件中的data选项要用函数的形式！
2. 模板template中只允许包含一个确切的根元素。所以如果要多个元素并写，把他们包在同一层div下就行。
3. 组件的名称可以用首字母大写命名（PascalCase）也可以用小写加横杠命名（kebab-case），但使用时只能用短横线分隔命名的名字。
   例如组件名字可以定义成CptAll或者cpt-all，但是在使用组件时，不管你用CptAll还是cpt-all命名，都要写成cpt-all才能正确编译！

二、局部组件

子组件的使用经历三个过程：
第一，声明组件；
第二，注册组件；（挂载）
第三，使用组件。
简称：生子，挂子，用子。

• 声明组件（生子）：

let ComponentA = { /* 选项 */ }
let ComponentB = { /* 选项 */ }
let ComponentC = { /* 选项 */ }

• 注册组件（挂子）：

new Vue({
  el: ‘#app‘,
  components: {
    ‘component-a‘: ComponentA,
    ‘component-b‘: ComponentB
  }
})

在实例中的components选项中注册子组件。

• 使用组件（用子）：

<div id=‘app‘>
  <component-a></component-a>
  <component-b></component-b>
</div>

在根元素下使用子组件。

三、父向子组件传值

利用子组件上的属性名将父组件的数据传到子组件中的props选项中。


注意：当属性前面加了冒号(:)时，表示后面传递的是一个js表达式（变量），如果没有加冒号，表示后面传递的仅仅是一个字符串！

四、子向父组件传值

五、非父子组件传值

原理：发布订阅/观察者模式/Bus总线

六、小结

1. 组件的使用：生子、挂子、用子。（全局组件在定义完成后就可以使用。）
2. template模板只允许有一个根元素。
3. 子组件的data选项要用函数返回的形式。
4. 组件名用小写加短横线的命名方法。
5. 自定义事件名用小写的，因为html会自动将监听的事件名改成小写。
6. 父传子利用属性接收数据的方法，并将数据保存在属性名中，子组件要将属性名放在props选项中，然后就能使用父组件的数据。
7. 子传父利用发布订阅原理。子组件触发事件，父组件监听事件。
8. 非父子传值利用原型上定义一个vue实例，通过这个中介来传递消息。
9. 非父子传值监听方式是在执行监听的组件的mounted阶段（挂载阶段）：this.bus.$on(监听事件名，callback)