Vue学习Ⅲ（过滤器、v-model、组件化说明与数据传输、父子组件相互之间的通信、$children和$refs、$parent与$root）

忘是亡心i 2023-05-22 10:24 22阅读 0赞

# 一、vue的过滤器 #

**作用**：对需要过滤的内容进行**一些处理**  
[查看官网][Link 1]

# 二、表单双向绑定v-model #

**v-model的基本使用**  
Vue是使用v-model指令来实现表单元素与数据的双向绑定

### v-model的基本使用与双向绑定 ###

那么什么是双向绑定呢？  
**表单的双向绑定**就是当表单里面的值改变的时候对应的数据也会改变，当数据改变的时候表单里面的值也会实现同步改变，而使用mustache语法只会实现单向绑定  
**举个栗子：**

<div class="app"> <input type = "text" v-model="message"> <h2>{ { message}}</h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              message: '你好，翠花'
            }
          });
        </script>

所以实际上**v-model**实际是是**v-on**与**v-bind**的结合

### v-model与radio的结合使用 ###

<div class="app">
          <input type = "radio" value='male' v-model="message">male
          <input type = "radio" value="female" v-model="message">female
          /*注意当使用v-model的时候，单选按钮就不用设置name属性也能实现单选（前提是value属性要有）*/
          /*而当使用name的时候不需要使用value属性即可实现绑定*/
          <h2>{ { message}}</h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              message: 'male'
            }
          })
        </script>

这里要注意v-model与value的配合使用

### v-model与checkbox的结合使用 ###

##### 例子1、单个复选框 #####

<div class="app"> <input type = "checkbox" v-model="isAgree">同意协议 <button :disabled="!isAgree">下一步</button> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              isAgree: false
            }
          })
        </script>

##### 例子2、多个复选款 #####

<div class="app">
          <input type = "checkbox" value="翠花" v-model="names">翠花
          <input type = "checkbox" value="毛毛" v-model="names">毛毛
          <input type = "checkbox" value="熊二" v-model="names">熊二
          <input type = "checkbox" value="光头强" v-model="names">光头强
          /*必须要v-model与value配合使用，如果没有value则当选择该项的时候值为null*/
          <h2>{ { names}}</h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              names: []					/*这里必须是数组*/
            }
          })
        </script>

### v-model与select的结合使用 ###

##### 例子1、单个select选择 #####

<div class="app">
          <select  v-model="name">
            <option disabled value="">请选择</option>	/*这里的value不能省略，因为与data里面的数据实现了双向绑定*/
            <option value = "翠花">翠花</option>
            <option value = "毛毛">毛毛</option>
            <option value = "熊二">熊二</option>
            <option value = "光头强">光头强</option>
            /*这里的value有没有效果似乎效果一样，不过还是建议写上以免有又什么幺蛾子*/
          </select> <h2>{ { name}}</h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              name: ''
            }
          })
        </script>

##### 例子2、多个select选择 #####

<div class="app">
          <select  v-model="names" multiple>
            <option value = "翠花">翠花</option>
            <option value = "毛毛">毛毛</option>
            <option value = "熊二">熊二</option>
            <option value = "光头强">光头强</option>
            /*这里的value有没有效果似乎效果一样，不过还是建议写上以免有又什么幺蛾子*/
          </select> <h2>{ { names}}</h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              names: []
            }
          })
        </script>

### 在动态绑定value的时候需要使用值绑定 ###

所谓**值绑定**就是绑定表单的value

<div class="app"> <label v-for="(value, index) in names">User : { { index}}
            <input type = "checkbox" :value="value" v-model="chooseNames"> <br> </label> <h2>{ { chooseNames}}</h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              chooseNames: [],
              names: ['翠花','熊二','吉吉国王','毛毛']
            }
          })
        </script>

也可以查看官网里面的[表单输入绑定][Link 2]

# 三、v-model的修饰符 #

### lazy ###

<div class="app">
          <input type = "text" v-model.lazy="names">
          /*在未加lazy的v-model是只要input输入内容改变，names里面的值会立马修改*/
          /*加了lazy的v-model是input内容失去焦点或者敲击回车的时候才会修改对应names（与表单事件change类似）*/
          <h2>{ { names}}</h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              names: ''
            }
          })
        </script>

### number ###

<div class="app">
          <input type = "number" v-model.number="age">
          /*表单的输入值都为string，使用number就可以使string自动转化为number类型，当然需要搭配type为number的表单一起使用*/
          <h2>{ { age + '-' + typeof age}}</h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              age: 0
            }
          })
        </script>

### trim ###

<div class="app">
          <input type = "text" v-model.trim="name">
          /*trim当然是去除字符串两端的空格啦，所以这里的作用是取除表单value两端的空格*/
          <h2>{ { name}}</h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              name: ''
            }
          })
        </script>

# 四、Vue组件化说明 #

那什么是组件化呢？  
把大的（难的）问题局部分解成小的问题，再针对小的问题进行具体的处理，那么最后所有的问题将不是问题。就如同**页面的处理**，我们如果把页面的逻辑都放在一起，处理起来就变得很复杂，**不利于**后期的管理与扩展，但如果我们把页面拆分成一小块一小块的功能块那么整个的页面的维护就会变得很简单了  
**来自Vue官网的说明**  
组件系统是 Vue 的另一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]  
当然也可以[查看官网][Link 3]

### Vue的组件化创建步骤： ###

①、创建组件构造器  
②、注册组件  
③、使用组件

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

# 五、Vue组件化使用 #

### 基本使用 ###

<div class="app">
          <my-cpnt></my-cpnt>			/*使用组件*/
        </div> <script> const cpnt = Vue.extend({ 		/*创建组件构造器*/
            template: `					/*反引号*/
              <div>
                <h2>hello，there</h2>
              </div>
            `
          });
          Vue.component('my-cpnt', cpnt);	/*注册组件*/
          const app = new Vue({ 				/*使用Vue的实例对象来管理元素*/
            el: '.app',
          });
        </script>

![在这里插入图片描述][20200418122118430.png]  
![在这里插入图片描述][2020041812232923.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]

### 全局组件与局部组件 ###

##### 全局组件：可以在多个Vue实例对象里面使用（用的少） #####

##### 局部组件：可以在某个Vue实例对象里面使用（用的多） #####

<div class="app1"> <h2>第一个div</h2> <my-cpnt1></my-cpnt1> <my-cpnt2></my-cpnt2> </div> <div class="app2"> <h2>第二个div</h2> <my-cpnt1></my-cpnt1> <my-cpnt2></my-cpnt2> </div> <script> const cpnt1 = Vue.extend({ 			/*创建组件构造器cpnt1*/
            template: `
              <div>
                <h2>Vue的全局组件</h2>
              </div>
            `
          }); const cpnt2 = Vue.extend({ 			/*创建组件构造器cpnt2*/
            template: `
              <div>
                <h2>Vue的局部组件</h2>
              </div>
            `
          });
          Vue.component('my-cpnt1', cpnt1);		/*注册全局组件*/
          const app1 = new Vue({ 				/*第一个Vue实例化对象*/
            el: '.app1', components: { 						/*components注册局部组件*/
              'my-cpnt2': cpnt2					
            }
          }); const app2 = new Vue({ 				/*第二个Vue实例化对象*/
            el: '.app2'
          });
        </script>

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

### 父组件与子组件 ###

<div class="app1">
          <cpnt2></cpnt2>							/*有输出效果，cpnt2标签识别成功*/
          <cpnt1></cpnt1>							/*无输出效果，cpnt1标签识别成功*/
        </div> <script> const cpnt1 = Vue.extend({ 				/*定义子组件构造器*/
            template: `
              <div>
                <h2>子组件</h2>
              </div>
            `
          }); const cpnt2 = Vue.extend({ 				/*定义父组件构造器*/
            template: `
              <div>
                <h2>父组件</h2>
                <cpnt1></cpnt1>						/*必须在div内部才有效*/
              </div>
              <cpnt1></cpnt1>						/*无效*/
            `, components: { 
              cpnt1: cpnt1							/*把子组件构造器注册到父组件构造器里面*/
            }
          }); const app1 = new Vue({ 					/*Vue的实例化对象*/
            el: '.app1', components: { 
              cpnt2: cpnt2							/*把cpnt2注册到实例化对象里面*/
            }
          })
        </script>

### 注册组件的语法糖 ###

<div class="app1"> <cpnt2></cpnt2> <cpnt1></cpnt1> </div> <script> Vue.component('cpnt1', { 				/*注册全局组件*/
            template: `
              <div>
                <h2>注册全局组件语法糖</h2>
              </div>
            `
          }); const app1 = new Vue({ 			/*实例化Vue对象*/
            el: '.app1', components: { 
              cpnt2: { 						/*注册局部组件*/
                template: `
              <div>
                <h2>注册局部组件语法糖</h2>
              </div>
            `
              }
            }
          })
        </script>

无论是注册全局组件语法糖还是局部的其工作原理都是一样的，都是在Vue的内部自行调用了Vue.extend()(而不需要我们来创建组件构造器)

### 模板（template）的分离写法 ###

##### 第一种：script标签 #####

##### 第二种：template标签 #####

<div class="app">
          <cpnt2></cpnt2>
          <cpnt1></cpnt1>
        </div>
        <script type="text/x-template" id="cpnt1">			/*script*/
          <div>
            <h2>script标签的模板抽离写法，要注意type</h2>
          </div>
        </script>
        <template id="cpnt2">								/*template*/
          <div> <h2>template标签的模板抽离写法</h2> </div> </template> <script> Vue.component('cpnt1', { 							/*注册全局组件*/
            template: '#cpnt1'
          }); const app = new Vue({ 
            el: '.app', components: { 
              cpnt2: { 										/*注册局部组件*/
                template: '#cpnt2'
              }
            }
          })
        </script>

### 那组件可以访问Vue实例里面的数据吗？ ###

答案是否定的，因为组件是一个单独的功能模块，有属于自己的HTML模板，也应该有自己的数据data模块，而且组件**不能直接访问**Vue实例中的data

<div class="app"> <cpnt></cpnt> </div> <template id="cpnt"> <div> <h2>{ { num}}</h2>					/*结果为2000*/
          </div> </template> <script> const app = new Vue({ 					/*Vue的实例化*/
            el: '.app', data: { 
              num: 2020
            }, components: { 
              cpnt: { 							/*注册局部组件*/
                template: '#cpnt', data() { 
                  return { 
                    num: 2000
                  }
                }
              }
            }
          })
        </script>

由上面可以知道组件对象有data属性（不过这data必须是一个函数，且函数的返回值必须是一个对象，对象里面保存这数据），也有methods，因此可知组件对象的原型应该是Vue

##### 那么又出现有一个问题，为什么data必须是一个函数呢？ #####

因为组件都是要复用的，如果data是一个对象（每次得到的地址是相同的）的话那么每一次使用组件时data是**共享的**，所以组件的数据会**紊乱**，而如果 data是**function** 且返回的是一个**对象**（每次返回的这个 **对象的地址**是不同的 ）的话就可以解决这个问题  
**比如下面这案例：**

<div class="app">
          <cpnt></cpnt>						/*使用组件*/
        </div>	
        <template id="cpnt">				/*定义模板*/
          <div> <h2>{ { num}}</h2> <button @click="increment">+</button> <button @click="decrement" :disabled="num <= 0">-</button> </div> </template> <script> const app = new Vue({ 				/*实例化Vue*/
            el: '.app', data: { 							/*实例化的data对象*/
              num: 2020						/*未被使用到*/
            }, components: { 					
              cpnt: { 						/*注册组件*/
                template: '#cpnt', data() { 					/*组件的data函数*/
                  return { 					/*返回一个函数*/
                    num: 0					/*被使用到*/
                  }
                }, methods: { 					/*组件的方法*/
                  increment() { 
                    this.num++;				/*这里的this指向的是该组件，从侧面证明组件也是有自己的methods*/
                  }, decrement() { 
                    this.num--;
                  }
                }
              }
            }
          })
        </script>

**结果:**  
![在这里插入图片描述][20200418152931843.gif]  
从结果可以看出，在最开始的时候显示的值为0**而并非是**2020，所以组件 是有自己的**data数据模块** 的  
当然使用function也能实现组件的**数据共享**，不过真实开发的我们是**不希望组件之间发生连锁反应**，使用最终 **Vue**是直接使用了**data（）函数**而非**data对象** ，来实现组件之间的**非连锁反应**  
**需要下面这样这样写就可以达到function的数据共享：**

/*定义一个obj类，类一旦定义内存地址就确定了*/
    let obj = { 
            num: 0
          };
    /*把data（）的返回值改为obj（每次返回的地址相同）即可实现不同组件的数据共享*/
    data() { 
            return obj
          },

# 七、父子组件之间的通讯 #

为什么需要通讯呢？  
举个例子，比如在**一个页面中我们从服务器里面拿到了一些数据**，**其中的一部分数据**是需要**传递给子组件的**，如此情况下**父子组件之间的通讯就显得尤为重要了**  
我们可以通过 **props** 属性实现**父组件向子组件传递数据**，和通过 **事件（自定义事件emit）** 来实现**子组件向父组件发送信息**  
在**真实的开发中**， **Vue实例和子组件的通信** 和 **父子组件之间的通信** 是 **相同** 的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 4]

### 父传数据到子 ###

##### 数组： #####

<div class="app">
          <cpnt :cname="name" :cage="age" :chobbies="hobbies"></cpnt>	/*数据绑定*/
        </div>
        <template id="cpnt">					/*模板定义*/
          <div> <h2>{ { cname}}---{ { cage}}</h2>		/*cname与cage都是传递来的数据*/
            <h2>排名---{ { num}}</h2>				/*num是该组件自己的data方法的数据*/
            <h2>爱好：</h2> <ul> <li v-for="value in chobbies">{ { value}}</li> </ul> </div> </template> <script> const cpnt = { 						/*利用注册组件的语法糖*/
            template: '#cpnt', data: function () { 					/*组件自己的data方法*/
              return { 
                num: 'No.1'
              }
            },
            props: ['cname', 'cage', 'chobbies']		/*数组方式，引号内为变量*/	
            /*是从父（这里是Vue）那里传递来的props数据，当props与组件自定义的数据重复的时候（一般都不会的），会以props的数据为准的*/
          }; const app = new Vue({ 							/*Vue实例*/
            el: '.app', data: { 										/*Vue实例的数据*/
              name: '吉吉国王',
              age: 8,
              hobbies: ['意淫', '装逼', '动画片', '电影', 8]
            }, components: { 
              cpnt,							/*注册组件*/
            }
          })
        </script>

**结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 5]

##### 对象（建议使用）： #####

<div class="app">
          <cpnt :cname="name" :cage="age" :chobbies="hobbies"></cpnt>	/*进行数据绑定*/
        </div> <template id="cpnt"> <div> <h2>{ { cname}}---{ { cage}}</h2> <h2>排名---{ { num}}</h2> <h2>爱好：</h2> <ul> <li v-for="value in chobbies">{ { value}}</li> </ul> </div> </template> <script> const cpnt = { 
            template: '#cpnt', data: function () { 
              return { 
                num: 'No.1'						/*组件自己的data*/
              }
            }, props: { 							/*对象方式*/
              cname: String,        /*限制cname是String类型的*/
              /*如果是值为[String, Object, Array]说明限制值为String, Object, Array*/
              cage: { 
                type: Number,		/*限制为Number类型*/
                default: 0,			/*默认值是简单类型就直接写*/
                required: true,		/*是否必须，值为true|false*/
                validator(value) {        /*当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告，返回true|false*/
                  return value % 2;
                }
              }, chobbies: { 
                type: Array,			/*限制为数组*/
                default() { 				/*注意默认值如果是数组或者是对象，那么default必须使用工程函数来声明*/
                  return [];
                }
              }
            }
          };
          /*一定要注意模板与实例化对象的顺序*/
          const app = new Vue({ 			/*实例化Vue对象*/
            el: '.app', data: { 
              name: '吉吉国王',
              age: 8,
              hobbies: ['意淫', '装逼', '动画片', '电影', 8]
            }, components: { 				
              cpnt,							/*组件绑定*/
            }
          })
        </script>

**对象**里面有一些**检测数据**的方式type、default、required、validator等等  
**validator检测的报错信息是：**  
![在这里插入图片描述][20200418172322433.png]  
当然也可以自定义类型检测，如:  
![在这里插入图片描述][20200418172412971.png]

##### props的驼峰标识 #####

**HTML 中的 attribute 名是大小写不敏感的**，所以浏览器会把所有大写字符解释为小写字符。这意味再使用 DOM 中的模板时，我们需要把 **camelCase** (驼峰命名法) 的 props 名 使用其等价的 **kebab-case** (短横线分隔命名) 命名

………
    <cpnt :c-name="name"></cpnt>	/*在cpnt标签里面使用短横线分隔命名*/
    ……… props: { 
    	………
        cName: String,			/*驼峰命名法*/
        ………
        }
    ………

**子组件的props属性里面的值是可以修改的但是官方不建议直接修改props的值且这样会有警告，所以我们一般都是使用组件的data方法和computed属性来获得props的值再对值做具体的操作**

### 子传数据到父 ###

<div class="app">
          <cpnt @get-data="finallies"></cpnt>			/*给cpnt绑定事件，注意这里表面上没有传递参数，实则把自定义事件的value传了进来， 类似与前面的$event，不过这里的传值只是针对自定义事件的（因为自定义事件没有事件对象$event）*/
          <h1>{ { d1}}</h1>
        </div>
        <template id="cpnt">							/*定义模板*/
          <div>
            <ul>
              <li v-for="(item, key) in names" @click="dataInterchange(item)">{ { key}}---{ { item}}</li>		/*在模板内定义事件*/
            </ul> </div> </template> <script> const cpnt = { 
            template: '#cpnt',					/*获得模板*/
            data: function () { 					/*组件自己的data*/
              return { 
                names: { 
                  name: '光头强',
                  age: 20,
                  job: 'logger'
                }
              }
            }, methods: { 	
              dataInterchange(value) { 			/*click事件的事件处理程序*/
                this.$emit('get-data',value)	/*利用$emit来触发get-data自定义事件，传入的值为value*/
              }
            }
          }; const app = new Vue({ 					/*实例化Vue*/
            el: '.app', data: { 
              d1: ''
            }, components: { 
              cpnt,								/*注册组件*/
            }, methods: { 							
              finallies(value) { 				/*对自定义事件get-data的事件处理程序*/
                this.d1 = value;				/*且这里也成功的接收到了参数，正如上面的所说的自定义事件是可以隐式传参数的*/
              }
            }
          })
        </script>

**结果：**  
![在这里插入图片描述][20200418194401206.gif]  
**自定义事件的过程：**在**子组件**里，通过 **$emit()** 来 **触发自定义事件** ；在**父组件**里，通过**v-on来监听自定义事件的触发**  
也可以参考[官网的自定义事件][Link 4]

讲个题外话，字符串（如：‘20’）乘1可以**把字符串转化为Number类型**

# 八、父子组件的访问方式 #

### 父组件获得子组件对象：$children和$refs ###

##### $children（使用较少） #####

<div class="app">
          <cpnt :cname="name"></cpnt>		/*父传子数据*/
          <cpnt></cpnt> <cpnt></cpnt> <h2>父组件</h2> <h2>{ { num}}</h2> <button @click="getClick">click</button> </div> <template id="cpnt"> <div> <h2>子组件</h2> <h2>{ { cnum}}</h2> <h2>{ { cname}}</h2> </div> </template> <script> const cpnt = { 
            template: '#cpnt', data: function () { 
              return { 
                cnum: 10
              }
            }, props: { 
              cname: { 
                type: String,
                required: false,
                default: '李老板'
              }
            }
          }; const app = new Vue({ 			/*实例化Vue对象*/
            el: '.app',					/*绑定div*/
            data: { 						/*Vue里面的data*/
              num: 0,
              name: '涂涂'
            }, components: { 				
              cpnt,						/*注册局部组件*/
            }, methods: { 
              getClick() { 
                console.log(this.$children);
                /*这里的this.$children返回的是一个数组，里面的每一个值都是一个组件对象（VueComponent）， 且this.$children可以对子组件里面的一些方法与属性的调用*/
                console.log(this.$children[0].cnum = 100);
                /*这里的this.$children[0].cnum可以调用在子组件里面data数据，从而达到修改子组件里面的data数据*/
                console.log(this.$children[0].cname = '萝卜头');
                /*这里的this.$children[0].cname 可以调用在子组件里面props数据，从而达到修改子组件里面的props数据， 不过这样是不推荐的（控制台会报出警告），就如同前面一样不推荐直接修改props里面的值 */
              }
            }
          })
        </script>

上面说到既然可以通过$children在父组件把数据传到子组件里面（子组件里面的data方法），但这样并不好，原因是这样**传输的数据**并不是**绑定**的，所以说从父组件那里传数据到子组件**使用props还是有必要的**  
结果：  
![在这里插入图片描述][20200419113201250.png]

##### $refs（使用较多） #####

<div class="app">
          <cpnt :cname="name" ref="c1"></cpnt>			/*注意这里是ref不是refs，且不需要v-bind*/
          <cpnt ref="c2"></cpnt> <cpnt ref="c3"></cpnt> <h2>父组件</h2> <h2>{ { num}}</h2> <button @click="getClick">click</button> </div> <template id="cpnt"> <div> <h2>子组件</h2> <h2>{ { cnum}}</h2> <h2>{ { cname}}</h2> </div> </template> <script> const cpnt = { 
            template: '#cpnt', data: function () { 
              return { 
                cnum: 10
              }
            }, props: { 
              cname: { 
                type: String,
                required: false,
                default: '李老板'
              }
            }
          }; const app = new Vue({ 
            el: '.app', data: { 
              num: 0,
              name: '涂涂'
            }, components: { 
              cpnt,								/*注册局部组件*/
            }, methods: { 
              getClick() { 
              	console.log(this.$refs['c1'] === this.$children[0]);	/*true*/
              	/*且$refs与$children里面的VueComponent组件对象完全一样的*/
                console.log(this.$refs);
                /*这里的this.$refs返回的是一个对象，里面的每一个key对应的值都是一个组件对象（VueComponent）， 且this.$refs可以对子组件里面的一些方法与属性的调用*/
                console.log(this.$refs['c1'].cnum = 100);
                /*这里的this.$refs['c1'].cnum可以调用在子组件里面data数据，从而达到修改子组件里面的data数据*/
                console.log(this.$refs.c2.cname = '萝卜头');
                /*这里的this.$refs.c2.cname 可以调用在子组件里面props数据，从而达到修改子组件里面的props数据， 不过这样是不推荐的（控制台会报出警告），就如同前面一样不推荐直接修改props里面的值 */
              }
            }
          })
        </script>

**结果：**  
![在这里插入图片描述][20200419114446973.png]

### 子组件访问父组件：$parent与$root ###

##### $parent（使用较少）与$root #####

<div class="app"> <cpnt :cname="name"></cpnt> <h2>父组件</h2> <h2>{ { num}}</h2> </div> <template id="cpnt"> <div> <h2>子组件</h2> <h2>{ { cnum}}</h2> <h2>{ { cname}}</h2> <button @click="getClick">click</button> </div> </template> <script> const cpnt = { 
            template: '#cpnt', data: function () { 
              return { 
                cnum: 10
              }
            }, props: { 
              cname: { 
                type: String,
                required: false,
                default: '李老板'
              }
            }, methods: { 
              getClick() { 
                console.log(this.$parent);
                /*获得父组件对象*/
                console.log(this.$root);
                /*获得根组件对象*/
              }
            }
          }; const app = new Vue({ 
            el: '.app', data: { 
              num: 0,
              name: '涂涂'
            }, components: { 
              cpnt,
            }
          })
        </script>

**结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 6]  
**$parent使用较少的原因是会增加组件之间的耦合度，不利于组件的开发**

# 九、watch的使用 #

<div class="app"> <input type = "text" v-model="num"> <h1>计数：{ { num}}</h1> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              num: 10
            }, watch: { 				/*用来监听属性值的改变*/
              num() { 
                console.log('监听属性值的改变，data、props、computed都可以');
              }
            }
          })
        </script>

本文只用与个人学习与记录

[Link 1]: https://cn.vuejs.org/v2/guide/filters.html
[Link 2]: https://cn.vuejs.org/v2/guide/forms.html#%E9%80%89%E6%8B%A9%E6%A1%86
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230521/b15f6d180bf14e84bc2f0b0a390ae02f.png
[Link 3]: https://cn.vuejs.org/v2/guide/#%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BA%94%E7%94%A8%E6%9E%84%E5%BB%BA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230521/590fbbf48f3f4dd9908146fe477f2cc9.png
[20200418122118430.png]: /images/20230521/7f5096051aa24f85996c48b329009dd6.png
[2020041812232923.png]: /images/20230521/68af44914cac497ca44cf7e39ed95b73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]: /images/20230521/21815f13c9c14477b4508671c051a40a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 3]: /images/20230521/d2f670872f984ca0944e9ee911b1b381.png
[20200418152931843.gif]: /images/20230521/e9268b54a0324c279e222a108f8880d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 4]: /images/20230521/7dfc76915f4b4fc9b983be27be94fefe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 5]: /images/20230521/b00e29205960470697961ae4124c7253.png
[20200418172322433.png]: /images/20230521/bdc2ffddff914dc5b1a0a57ed61eddae.png
[20200418172412971.png]: /images/20230521/f2574915c1c846eaae70d1adfc83ebe5.png
[20200418194401206.gif]: /images/20230521/4cab9c9d93584e4f832caf2c92e0414b.png
[Link 4]: https://cn.vuejs.org/v2/guide/components-custom-events.html
[20200419113201250.png]: /images/20230521/5998928400a8432c8fdb391f58cb7507.png
[20200419114446973.png]: /images/20230521/7e230f53b92c42019783534787c04399.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 6]: /images/20230521/eaadd2cd756d4e90a1561c7270eff3c9.png