zoukankan      html  css  js  c++  java
  • 组件基础

    使用v-on 时 可以在根组件上 监听子组件由$emit注册的事件 

    然后进行调试   子组件$emit(注册一个事件名,返回的数据)  该返回的数据可以由 $event 直接捕获到

    <blog-post
      ...
      v-on:enlarge-text="postFontSize += $event" //直接捕获 在等号右边可以是一个变量或者是具体的数据  该变量无需传值 可以从父元素上拿到

    ></blog-post>

    也可以是在根组件上 v-on 上注册一个方法 用这个方法来接收这个参数。

    <blog-post
      ...
      v-on:enlarge-text="onEnlargeText"  //该方法只能接收一个参数 所有在传输多条数据时 可以传一个对象或者一个json
    ></blog-post>
    
    
    methods: {
      onEnlargeText: function (enlargeAmount) {
        this.postFontSize += enlargeAmount
      }
    }

    组件内 的template: 可以使用字符串模板 es6 语法需要使用babel 或者使用其他插件来支持IE8  也可以使用 转义符号去支持IE8浏览器 

    组件内使用slot插槽 可以在template中直接使用slot去占位 然后在该组件解析上去使用 和插入内容。

    vue的官网组件切换实例如下

    <component v-bind:is="currentTabComponent"></component>
    这里可以使用
    vue的代码
    var tabs = [
      {
        name: 'Home', 
        component: { 
          template: '<div>Home component</div>' 
        }
      },
      {
        name: 'Posts',
        component: {
          template: '<div>Posts component</div>'
        }
      },
      {
        name: 'Archive',
        component: {
          template: '<div>Archive component</div>',
        }
      }
    ]
    
    new Vue({
      el: '#dynamic-component-demo',
      data: {
          tabs: tabs,
        currentTab: tabs[0]
      }
    })
    
    html的代码
    
    <div id="app">
      <h2>Todos:</h2>
      <ol>
        <li v-for="todo in todos">
          <label>
            <input type="checkbox"
              v-on:change="toggle(todo)"
              v-bind:checked="todo.done">
    
            <del v-if="todo.done">
              {{ todo.text }}
            </del>
            <span v-else>
              {{ todo.text }}
            </span>
          </label>
        </li>
      </ol>
    </div>
     
  • 相关阅读:
    Java的参数传递是「按值传递」还是「按引用传递」?
    算法08 五大查找之:二叉排序树(BSTree)
    算法07 五大查找之:索引查找
    算法06 五大查找之:二分查找
    Django rest_framework实现RESTful API
    jenkins + pipeline构建自动化部署
    jenkins部署.net平台自动化构建
    python实现编写windows服务
    iis部署python运行环境
    Jenkins执行批处理文件、powershell失败
  • 原文地址:https://www.cnblogs.com/l8l8/p/9163734.html
Copyright © 2011-2022 走看看