vue2 使用ref进行传值的学习

上一篇文章用v-bind绑定props进行传值,还有个方法是定义ref对变量进行定位,使得子组件可以定位到父组件的数据内容, 使用js代码进行控制, 但是并不是同步更改的, 因为双方并没有建立绑定关系,需要js修改双方数据

父组件template:

<btitle ref="x"></btitle>
<!--这样只会修改父组件的title值, 而子组件不变-->
<button v-on:click="title='父组件换标题'">父组件换标题</button>
<!-- 应该这样,同时把子组件title进行修改-->
<button v-on:click="title='父组件换标题';$refs.x.title=title">父组件换标题</button>

如果想要子组件创建的时候赋值需要在父组件添加代码:

mounted: function () {
    this.$refs.x.title = this.title
  }

子组件修改父组件数据,子组件html:

<button v-on:click="$parent.title='子组件换标题'">子组件换标题</button>

父子组件可以随时获取组件的值,但是组件变量数据的变化无法同步相应, 子组件需要调用$emit()来让父组件或者直接$parent.title改数据,开发需要自己注意让数据同步. 相当于组件直接操作DOM, 耦合性过高.

总结: ref没有数据的同步(也不鼓励数据流逆向),js用来直接提取数据比较方便,通过ref对数据组进行重命名,之后$refs.[变量名]来获取或者修改,父子组件可以相互操作,但是会造成代码耦合性过高