vue之组件传值，父子组件双向绑定。

r囧r小猫 2021-10-19 00:14 637阅读 0赞

### vue之组件传值 ###

*   *   *   *  一、 父传子
             *   *   *  1. 父组件给子组件绑定事件
                     *  2. 子组件，props接收
             *  二、子传父
             *   *   *  1.子组件，this.$emit
                     *  2.父组件，v-on接收
             *  三、父子组件双向绑定。单向数据流【重要】
             *   *   *  1.用watch监听。
                     *  2.computed计算属性【优化】

> 当你写个公共组件的时候，需要用到。

#### 一、 父传子 ####

> 页面向自定义的组件，或者父组件向子组件传递时。

###### 1. 父组件给子组件绑定事件 ######

在父组件上绑定属性，传递给子组件，	例如：

![父组件][20190813182252853.png]  
【Adv】: 子组件标签  
【：isShow】:父组件绑定的属性  
【isShow1】:父组件想向子组件传递的值。

###### 2. 子组件，props接收 ######

用props接收父组件绑定事件，传来的值，例如：

![子组件][20190813182734289.png]  
【isShow】:就是父组件绑定的属性。它在子组件用props接收后，用this.isShow就可获取使用。

#### 二、子传父 ####

子组件定义的值，想向父组件传递。

###### 1.子组件，this.$emit ######

![子传父][20190813183241873.png]  
【show】:子组件定义的事件名，val传递给父组件的值

###### 2.父组件，v-on接收 ######

![父组件][20190813183801672.png]  
【@show】：@，v-on的简写。show是子组件定义的。  
【showAdv】:父组件用来接收子组件传值得函数方法。  
![在这里插入图片描述][20190813184038843.png]

#### 三、父子组件双向绑定。单向数据流【重要】 ####

> 因为vue是单向数据流的，父组件修改数据传递给子组件可以，但子组件不能修改父组件传递过来的数据。

要想实现双向数据流，父组件不用做修改。
     主要修改子组件

###### 1.用watch监听。 ######

子组件data中定义一个新的副本，用来保存父组件传递过来的值。  
![在这里插入图片描述][20190813184720182.png]

> 用watch监听数据变化。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70]

###### 2.computed计算属性【优化】 ######

不用在data中定义新副本保存父组件传递来的数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70 1]

> 有兴趣可以了解下，watch和computed的区别。  
> 另外非父子组件，可以用vuex等，技术实现。  
> [这是我另一个vuex使用范本][vuex]

[20190813182252853.png]: /images/20211018/8b4aded62797479fa6f7c262f75d0f0b.png
[20190813182734289.png]: /images/20211018/1195c14e94894df3823ce0d9d378cf9e.png
[20190813183241873.png]: /images/20211018/57f0d0ecf8a44b5589219f18bbe7d371.png
[20190813183801672.png]: /images/20211018/3af617c311ec403baaa901dccfdbb359.png
[20190813184038843.png]: /images/20211018/576cb9c0c9bc4cf9bd1d8261441e5360.png
[20190813184720182.png]: /images/20211018/d858eddd54614564802bd8789beec66e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70]: /images/20211018/137e57cfdbd042399ad44df3355a3b16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70 1]: /images/20211018/01362f236d08487996c7198df3e16fdd.png
[vuex]: https://blog.csdn.net/qq_42690547/article/details/93194728