Cpage.js

Cpage.js 目前支持的组件属性

属性名 是否必须 类型 用途
name 是 字符串 组件名称
components 是 数组 子组件名称集合
data 否 对象 组件属性
props 否 对象 用于子组件与父组件之间的数据传递
style 否 字符串 组件样式
styleId 否 字符串，id选择符 组件样式，es5语法
styleUrl 否 数组或对象 组件样式，es6语法，支持import * as css from ''; 或者require('../style.css')，需要引入css-loader
template 否 字符串 组件模板，es5,es6通用
templateId 否 字符串，id选择符 组件模板，es5语法
templateUrl 否 数组或对象 组件模板，es6语法，支持import * as html from ''; 或者require('../xx.html')，需要引入html-loader

# name 组件名称

组件名称，需要使用驼峰命名的规则；比如定义组件名称为cFooter那么在父组件应用使用

子组件

constructor(){
  super();
  this.name = 'cFooter';
}

父组件 可以直接赋值

// 导入组件
import cFooter from "./cFooter";

// 使用组件
export default class Article extends Component {
  constructor(){
    super();
    this.components = [cFooter]; // 加载子组件
    this.template = `<c-footer />`;
  }
}

# props 父组件向子组件传递属性

父组件定义props

constructor(){
  super();
  this.name = 'article';
  this.props = {
    text: {
      type: 'string',
      default: 'demo'
    }
  };
  this.template = `<div>{{text}}</div>`;
}

子组件中使用props 可以直接赋值

constructor(){
  super();
  this.name = 'article';
  this.template = `<article text="demo text"></article>`;
}

也可以使用变量，变量需要使用两个大括号{{}}包裹

constructor(){
  super();
  this.name = 'article';
  this.data = {
    textProps: 'text demo'
  };
  this.template = `<article text="{{textProps}}"></article>`;
}

← 方法 →