vue中的ref属性

el，ref和root的使用
$el是获取当前dom元素
$refs是获取当前设置了ref属性的元素
$root是获取当前组件的父组件的vue对象

    <div id="main">
      <h3 ref="a">xixixixiixh3>
      <p ref="b">加油呀p>
      <son ref="ccc">son>
      <button @click="test">调用子组件中的方法和属性button>
    div>

      new Vue({
        el: "#main",
        components: {
          son, // 同son:son，属性值和属性值同名可以简写
        },
        // 组件挂载成功之后可以获取当前的dom元素
        mounted() {
          // $el获取当前的dom元素
          console.log(this.$el);
          // 根据获取的dom元素进行进一步筛选,获取p标签
          console.log(this.$el.querySelector("p"));
          // $ref获取当前组建中设置了ref属性的标签
          console.log(this.$refs);
          // 输出属性值为b的p标签
          console.log(this.$refs.b);
          // $root获取当前组件的父组件的vue对象，如果没有父组件，就显示自己的内容
          console.log(this.$root);
        },
        methods: {
          test() {
            this.$refs.ccc.dec();
            console.log(this.$refs.ccc.msg);
          },
        },
      });

控制台输出结果

$root的vue对象的输出结果

父组件如果想要访问获取子组件里面的属性和方法，可以为他设置一个ref属性，通过ref属性获取子组件然后直接使用它的方法

      const son = {
        template: "
我是子组件
",
        data() {
          return {
            msg: 111,
          };
        },
        mounted() {
          // 输出当前组件的父组件#main，当挂载成功之后就会触发
          console.log(this.$root.$el);
        },
        methods: {
          dec() {
            console.log("我是儿子组件son");
          },
        },
      };
    new Vue({
        el: "#main",
        components: {
          son, // 同son:son，属性值和属性值同名可以简写
        },
        methods: {
          test() {
            // 调用子组件中的方法
            this.$refs.ccc.dec();
            // 使用子组件中的数据
            console.log(this.$refs.ccc.msg);
          },
        },
      });

点击按钮之后的输出结果，调用儿子组件的方法和属性