Vue中 ref 两种用法

1.给普通元素添加 ref 

        --1. 给普通元素添加了 ref 可以使用 this.$refs.( ref名) 可以获取到普通 dom 元素

        --2. ref 名可自行定义，在 this.$refs 后使用可以进行操作，修改 css 样式等：

我们先准备一个 text3.vue 子组件：

效果： 

 当我们点击按钮后：

 2.给组件添加 ref 

        --1. 给组件添加 ref 的方法：在父组件 App.vue 中 template 中 text3 标签中绑定 ref 属性

        --2. 在子组件中去掉开始的 button 标签，我们可以通过父组件直接改变至上面一样的效果

        --3. 在父组件中定义一个按钮，来直接调用子组件中的 changeVal 方法：

methods: {
       toSon() {
         this.$refs.text3Change.changeVal()
       }
      }

效果：