vue中父子组件之间的传值：对值的限制

Dear 丶 2022-04-16 00:17 515阅读 0赞

**1. 父组件向子组件传值**

**vue组件中的传值是：单向流的**，即父组件向子组件传值，同时子组件不可改变父组件传来的值，因为父组件的值不仅仅被一个子组件使用，子组件随意修改父组件的值，会影响到其他子组件的数据。

但是**子组件可以clone该值，然后就可以随意改动使用**

**（1）下面是原始值的clone方法：**

<div id="app">
            <counter :count="count"></counter>
            <counter :count="count"></counter>
        </div>
        <script>
            var counter = {
                props: ['count'],
                data: function () {
                    return {
                        number: this.count //Clone the values of the parent component
                    }
                },
                template: `<div @click="handle">{
       {number}}</div>`,
                methods: {
                    handle() {
                        this.number++
                    }
                }
            }
            var vm = new Vue({
                el: '#app',
                data: {
                    count: 1
                },
                components: {
                    counter // writing style of ES6  
                }
            })
        </script>

**（2）引用值clone方法**

比如：从父组件传来的值list和空数组拼接，形成新的数组，再将该地址赋给arrList

data () {
             arrList: this.list.concat([])
           },

**1.1 父组件向子组件传值可以进行校验（props特性）**

<div id="app">
           <counter count="str"></counter>  
        </div>
        <script>
            var counter = {
                props:{
                    count: String
                },
                data: function(){
                    return {
                        number: this.count
                    }
                },
                template: `<div>{
       {number}}</div>`,
            }
            var vm = new Vue({
                el: '#app',
                components: {
                    counter // writing style of ES6  
                }
            })
        </script>

结果：

![20181114192927400.png][]

注意：父组件中的count不是![20181114193107505.png][]，如果是![20181114193141130.png][]，那么str就是表达式，会报错str is not defined。而![20181114193257382.png][]表示count的值是str，并且可以传入到子组件的props中。

（1）表示count必须是String类型。

![20181114193813320.png][]

（2）表示count必须是String或Number类型

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

（3）规定父组件传值时，规定count值的类型和是否必传

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1][]

（4）如果required是false，则允许父组件不传入count，此时，设置的默认值才会生效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2][]

结果：

![20181114202652368.png][]

（5）对该值更精确的规定需要用validator

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 3][]

1.2  父组件直接**传的不是**一个**变量**（动态值），count前不需要冒号

![20181115091153875.png][]

<div id="app">
        <counter count="hell"></counter>  
     </div>
     <script>
         var counter = {
             props: ['count'],
             data: function(){
                 return {
                     number: 'hello world'
                 }
             },
             template: `<div>{
       {number}} {
       {count}}</div>`,
         }
         var vm = new Vue({
             el: '#app',
             components: {
                 counter // writing style of ES6  
             }
         })

2. 子组件可以通过$emit()方法，向父组件传值

<div id="app">
           <counter :count="2" @change="perceptSonComponent"></counter>
           <counter :count="3" @change="perceptSonComponent"></counter>   
        </div>
        <script>
            var counter = {
                props: ['count'],
                data: function(){
                    return {
                        number: this.count //Clone the values of the parent component
                    }
                },
                template: `<div @click="handle">{
       {number}}</div>`,
                methods: {
                    handle(){
                        this.number = this.number + 2;// Every click, the number increase 2 
                        this.$emit('change', 2);  //子组件将增加的2传给父组件
                    }
                }
            }
            var vm = new Vue({
                el: '#app',
                components: {
                    counter // writing style of ES6  
                },
                methods: {
                    perceptSonComponent(parameter){
                        console.log(parameter)
                    }
                }
            })
        </script>

[20181114192927400.png]: /images/20220416/596003917c9545f996cd015e83ce6b67.png
[20181114193107505.png]: https://img-blog.csdnimg.cn/20181114193107505.png
[20181114193141130.png]: https://img-blog.csdnimg.cn/20181114193141130.png
[20181114193257382.png]: /images/20220416/8317634085b241ec94488ae3fe09c9ad.png
[20181114193813320.png]: /images/20220416/8dd455b426a64d8a8bf7ca987e35a37b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220416/fc1a227df07747c092649a56d611ad33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20220416/ecf8a79e26d84edf9b5c61aa227ccd2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20220416/f201231614a9442981c52ce1dca3b660.png
[20181114202652368.png]: /images/20220416/9c05060087374d71b2a2503493e4a44a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20220416/57c92fdd4eb04aa8801e340272b6a38c.png
[20181115091153875.png]: /images/20220416/fb46d1a19ae4430aa25998bc927aefff.png