zoukankan      html  css  js  c++  java
  • vue父子访问refs

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      </head>
    
      <body>
        <div id="app">
          <comp ref='furong'> </comp>
          <button type="button" @click="refs">获取子</button>
        </div>
    
        <template id="comp">
          <div id="">
            <p>{{message}}</p>
          </div>
        </template>
    
        <script>
          // 子组件
          const comp = Vue.extend({
            template: '#comp',
            data() {
              return {
                message: 'Hello Vue.js!',
                books: [{
                    name: 'HTML/HTML5基础',
                    price: 15.5,
                  },
                  {
                    name: '高健壮性CSS',
                    price: 16.5,
                  },
                  {
                    name: '深入学习JS',
                    price: 17.5,
                  },
                ]
              }
            },
          })
    
          // root
          const app = new Vue({
            el: '#app',
            components: {
              comp,
            },
            methods: {
              refs() {
                // 不常用$children
                console.log(this.$children);
                // 常用$refs 对象类型(默认空对象)
                console.log(this.$refs.furong.message);
              }
            }
          })
        </script>
      </body>
    </html>
    

    image

  • 相关阅读:
    Java 条件语句
    Java循环
    Java 变量
    Java 数据类型
    nginx+php发布网站
    安装MySQL5.7
    docker-compose参数
    部署
    dockerfile编写
    在VMware中安装CentOS7
  • 原文地址:https://www.cnblogs.com/zhangxuechao/p/14976436.html
Copyright © 2011-2022 走看看