微信小程序模板语法的使用和组件内传递样式externalClasses的用法

模板语法使用：官方文档

1. 创建模板

• 第一种简单用法

    <!-- 模板 -->
    <template name="a-name">
        我是模板信息123
    </template>

    <!-- 使用 -->
    <template is="a-name"></template>

• 第二种传递数据用法

   <!-- 模板 -->
   <template name="b-name">
        我是模板信息: {{ text }}
    </template>

    <!-- 直接在data上使用 -->
    <template is="b-name" data="{{ text: 'forbar' }}"></template>
    <!-- data的值引用page里面的data值 -->
    <template is="b-name" data="{{ ...bName }}"></template>

• 创建item.wxml 组件引用，import 有作用域的概念，当前页面引用的话才生效，如果多层嵌套在使用的话是不生效的

	<!-- 创建item.wxml -->
	<template name="item">
    	<text>我是引用的：---{{text}}</text>
	</template>
	
	<!-- 在需要使用的页面引用item.wxml -->
    <import src="item.wxml"/>
    <template is="item" data="{{text: 'forbar'}}"/>
    <!-- data的值引用page里面的data值 -->
    <template is="item" data="{{ ...bName }}"></template>

2. externalClasses的用法 官方文档

当前引用组件需要在不同地方展示，但样式不同时，需要此属性，外部样式定义,在组件内声明具体生效的样式名，可以多个，

• 父组件传递

//父组件传递
<item-view my-class="item-bg"></item-view>
.item-bg{
	background: #FF912F;
}

• 子组件使用

//组件内js使用
Component({
  externalClasses: ['my-class']
})
//组件内wxml使用
<view class="my-class"> 张三 <view>

**注：**当父组件和子组件样式冲突时，需提高权重覆盖子组件内地样式