zoukankan      html  css  js  c++  java
  • Vue 自定义组件

    一、创建自定义组件

    1、自定义属性

    父组件是使用 props 传递数据给子组件
    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <button v-on:click="reverseMessage">逆转消息</button>
        <span>{{message}}</span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Btn',
      props: ['message'],
      data () {
        return {
          msg: '按钮'
        }
      },
      methods: {
        reverseMessage: function () {
          // this.msg.split('').reverse().join()
          alert('hello world')
        }
      }
    
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      .hello{
        background-color: red;
      }
    
    </style>
    

      

    props: ['message']为属性值

    使用自定义组件

    2、自定义事件
    父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件!

      使用 $on(eventName) 监听事件
      使用 $emit(eventName) 触发事件

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <button v-on:click="reverseMessage">逆转消息</button>
        <span>{{message}}</span>
        <button v-on:click="incrementHandler">{{counter}}</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Btn',
      props: ['message'],
      data () {
        return {
          msg: '按钮',
          counter: 0
        }
      },
      methods: {
        reverseMessage: function () {
          // this.msg.split('').reverse().join()
          alert('hello world')
        },
        incrementHandler: function () {
          this.counter += 1
          this.$emit('increment')
        }
      }
    
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      .hello{
        background-color: red;
      }
    
    </style>
    

      父组件中使用

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <button v-on:click="reverseMessage">逆转消息</button>
        <btn message="你好"></btn>
        <btn v-on:increment="incrementTotal"></btn>
        <p>父组件{{total}}</p>
      </div>
    </template>
    
    <script>
    import Btn from './Btn.vue'
    
    export default {
      components: {Btn},
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          total: 0
        }
      },
      methods: {
        reverseMessage: function () {
          // this.msg.split('').reverse().join()
          alert('hello world')
        },
        incrementTotal: function () {
          this.total += 1
        }
    
      }
    
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
    

      



  • 相关阅读:
    java单例设计模式
    java实现直接排序冒泡排序二分查找数组反转
    使用LinkedList模拟洗牌功能
    使用LinkedList实现堆栈和队列数据结构存储方式
    Jdeveloper运行缓慢或启动报错【Unable to create an instance of the Java Virtual Machine】解决方法
    java线程——守护线程
    OAF常用配置文件(Profile)
    pl/sql动态根据cursor插入数据(含'&等特殊字符)
    java多线程介绍(二)
    eclipse 3.6 + tomcat 6.0 开发SSH框架学习
  • 原文地址:https://www.cnblogs.com/linlf03/p/10954478.html
Copyright © 2011-2022 走看看