vue ref属性nextTick axios 兄弟传值父子通信

靓仔你好哇

2022-03-18 304 阅读1分钟

一：ref属性

ref属性
1. 被用来给元素或 子组件 注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，在元素上添加ref属性  通过ref属性可操作dom元素
3.因为dom元素是在mounted钩子函数时已经渲染完毕 所以操作dom最早可以在该钩子函数中操作
4.（在mounted之前操作会得到undefined）通过this.$refs.xxx/this.$refs["xxx"]来操作dom元素
3. 使用方式：     
1. 打标识：```<h1 ref="变量名">.....</h1>``` 或 ```<School ref="变量名"></School>```    
2. 获取：```this.$refs.变量名```this.$refs可以获取到组件的实例对象 而通过传统的方式只能获得真实的DOM
复制代码

二：nextTick

nextTick
**当数据更新了，在dom中渲染后，自动执行该函数，**
1. 语法：```this.$nextTick(回调函数)```
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。 
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
复制代码
复制代码

三：axios

axios
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
复制代码

四：兄弟传值也可以父子传值

父子传值目前三种方式：
一： 父通过变量名传过去：
1.msg=“msg” 子：props：【‘msg’】接收 
子改父：子组绑定事件 然后传一个自定义事件 父用自定义事件来绑定自己的方法 在方法中修改值
二：$parent $children
1：子中通过created钩子函数获取this.$parent父的方法和属性
2.父中通过在mountd钩子函数获取this.$children子的方法和属性
子的方法 建议在父的html绑定一个点击事件去调用
3：就是$bua.$on方式
复制代码

第一步：在main.js上new 出一个新的vue实例化对象，挂载到当前使用的vue的原型上并起个属性名叫$bus，

第二步：在兄弟1中点击按钮发送兄弟1的值

第三步：在兄弟2中在组件创建的时候使用当前vue原型上的￥bus属性并通过￥on来监听自定义事件兄弟1传过来的值然后打印冰修改自己data中的值

五父子通信

1.使用.sync语法糖的形式子组件改变父组件传过来的值：