zoukankan      html  css  js  c++  java
  • vue 学习四 了解组件

    1组件的注册

       全局注册

    import Vue from 'vue';
    import com from './component1';
    Vue.component("com_name",com)//第一个参数是你为注册的组件定义一个id,第二个是你要注册的组件

       局部注册

    //在组件内
    import com from "../components/a_component";
    export default {
      name: "home",
      components: {
        com_name: com //com_name 是你为注册的组件定义一的id,它会成为在<template>中使用时的标签名,com要注册的组件
      }
    }
    <template>
      <div id="home">
       <com_name></com_name>
      </div>
    </template>

    2组件通讯

     父组件传值给子组件 props

      第一种

     在子组件中使用props:[],将其定义成一个数组的方式

    //父组件
    <template>
      <div id="home">
        <input type="type" id="one" v-model.trim="picked" />
        <com test='12345'></com> //在组件标签上添加一个属性 这里可以添加任意个 和任意种类型包括对象、数组甚至方法,如果是添加复杂类型 请使用:test的vue动态绑定语法,
    //像这种html语法支持number和string,复杂的如对象方法会识别不了 </div> </template>
    //子组件
    <template>
      <div class="a_component-wrap">
        <h1>
          {{test}} //使用
        </h1>
      </div>
    </template>
    
    <script>
    export default {
      name: "AComponent",
      props:["test"] //只有在这里声明过的props才能像data里面的属性一样正常使用,添加多个['test','test1','test2',...],
    //假设父组件在子组件上定义了test1 test2两个props,而子组件声明了test1,那么子组件使用test2的时候会报出 not defined };
    </script>

    第二种

      在子组件中使用props:{}

    export default {
      name: "AComponent",
      props:{
        test1:{
          type:Boolean, //提供一个类型检查 如果这里定义的是boolean,那么父组件传递过来的数据就只能是boolean,否则报错
          default:false //提供一个默认值,当父组件没有将test1传递过来的时候,子组件上test1的值会是false,它和type可以只有type 或只有default或都有
        }
      }
    };

    值得一提的是,为什么组件里的data会是一个function,这是为了保证在多个地方使用这个组件的时候,组件的实例是独立的,比如说,你有一个计时器组件,你在三个地方使用了它,第一个时间显示为20 第二个为10 第三个为0,这三个实例都是独立的,但如果组件中的data是一个对象,那么这三个实例就会都是一样的状态

  • 相关阅读:
    看看别人实现的投影触控技术
    SharePoint (MOSS2007) 中 实现Form 验证全部(转载)
    XPath简明教程
    做人,做事,做架构师 转载 潘爱民 文章
    Java不适合于作为主要编程教学语言 孟岩
    KenaBoy的provider模式(转载)
    愚老先生的 WSS3.0 Lists服务的使用方法,帮了大忙
    Provider模式(转载)
    没有配置aspnetdb的情况下Membership的默认存储方式
    【ASP.NET开发】.NET三层架构简单解析 分类: ASP.NET 20130116 18:05 1568人阅读 评论(0) 收藏
  • 原文地址:https://www.cnblogs.com/wrhbk/p/11664475.html
Copyright © 2011-2022 走看看