array(2) {
  ["docs"]=>
  array(10) {
    [0]=>
    array(10) {
      ["id"]=>
      string(3) "428"
      ["text"]=>
      string(77) "Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法"
      ["intro"]=>
      string(288) "目录

ECharts
异步加载



ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [
        "
      ["username"]=>
      string(8) "DonetRen"
      ["tagsname"]=>
      string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer"
      ["tagsid"]=>
      string(23) "[401,402,403,"300",404]"
      ["catesname"]=>
      string(0) ""
      ["catesid"]=>
      string(2) "[]"
      ["createtime"]=>
      string(10) "1511400964"
      ["_id"]=>
      string(3) "428"
    }
    [1]=>
    array(10) {
      ["id"]=>
      string(3) "427"
      ["text"]=>
      string(42) "npm -v；报错 cannot find module "wrapp""
      ["intro"]=>
      string(288) "目录

ECharts
异步加载



ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [
        "
      ["username"]=>
      string(4) "zzty"
      ["tagsname"]=>
      string(50) "node.js|npm|cannot find module "wrapp“|node"
      ["tagsid"]=>
      string(19) "[398,"239",399,400]"
      ["catesname"]=>
      string(0) ""
      ["catesid"]=>
      string(2) "[]"
      ["createtime"]=>
      string(10) "1511400760"
      ["_id"]=>
      string(3) "427"
    }
    [2]=>
    array(10) {
      ["id"]=>
      string(3) "426"
      ["text"]=>
      string(54) "说说css中pt、px、em、rem都扮演了什么角色"
      ["intro"]=>
      string(288) "目录

ECharts
异步加载



ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [
        "
      ["username"]=>
      string(12) "zhengqiaoyin"
      ["tagsname"]=>
      string(0) ""
      ["tagsid"]=>
      string(2) "[]"
      ["catesname"]=>
      string(0) ""
      ["catesid"]=>
      string(2) "[]"
      ["createtime"]=>
      string(10) "1511400640"
      ["_id"]=>
      string(3) "426"
    }
    [3]=>
    array(10) {
      ["id"]=>
      string(3) "425"
      ["text"]=>
      string(83) "深入学习JS执行--创建执行上下文（变量对象，作用域链，this）"
      ["intro"]=>
      string(288) "目录

ECharts
异步加载



ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [
        "
      ["username"]=>
      string(7) "Ry-yuan"
      ["tagsname"]=>
      string(33) "Javascript|Javascript执行过程"
      ["tagsid"]=>
      string(13) "["169","191"]"
      ["catesname"]=>
      string(0) ""
      ["catesid"]=>
      string(2) "[]"
      ["createtime"]=>
      string(10) "1511399901"
      ["_id"]=>
      string(3) "425"
    }
    [4]=>
    array(10) {
      ["id"]=>
      string(3) "424"
      ["text"]=>
      string(30) "C# 排序技术研究与对比"
      ["intro"]=>
      string(288) "目录

ECharts
异步加载



ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [
        "
      ["username"]=>
      string(9) "vveiliang"
      ["tagsname"]=>
      string(0) ""
      ["tagsid"]=>
      string(2) "[]"
      ["catesname"]=>
      string(8) ".Net Dev"
      ["catesid"]=>
      string(5) "[199]"
      ["createtime"]=>
      string(10) "1511399150"
      ["_id"]=>
      string(3) "424"
    }
    [5]=>
    array(10) {
      ["id"]=>
      string(3) "423"
      ["text"]=>
      string(72) "【算法】小白的算法笔记：快速排序算法的编码和优化"
      ["intro"]=>
      string(288) "目录

ECharts
异步加载



ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [
        "
      ["username"]=>
      string(9) "penghuwan"
      ["tagsname"]=>
      string(6) "算法"
      ["tagsid"]=>
      string(7) "["344"]"
      ["catesname"]=>
      string(0) ""
      ["catesid"]=>
      string(2) "[]"
      ["createtime"]=>
      string(10) "1511398109"
      ["_id"]=>
      string(3) "423"
    }
    [6]=>
    array(10) {
      ["id"]=>
      string(3) "422"
      ["text"]=>
      string(64) "JavaScript数据可视化编程学习（二）Flotr2，雷达图"
      ["intro"]=>
      string(288) "目录

ECharts
异步加载



ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [
        "
      ["username"]=>
      string(7) "chengxs"
      ["tagsname"]=>
      string(28) "数据可视化|前端学习"
      ["tagsid"]=>
      string(9) "[396,397]"
      ["catesname"]=>
      string(18) "前端基本知识"
      ["catesid"]=>
      string(5) "[198]"
      ["createtime"]=>
      string(10) "1511397800"
      ["_id"]=>
      string(3) "422"
    }
    [7]=>
    array(10) {
      ["id"]=>
      string(3) "421"
      ["text"]=>
      string(36) "C#表达式目录树（Expression）"
      ["intro"]=>
      string(288) "目录

ECharts
异步加载



ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [
        "
      ["username"]=>
      string(4) "wwym"
      ["tagsname"]=>
      string(0) ""
      ["tagsid"]=>
      string(2) "[]"
      ["catesname"]=>
      string(4) ".NET"
      ["catesid"]=>
      string(7) "["119"]"
      ["createtime"]=>
      string(10) "1511397474"
      ["_id"]=>
      string(3) "421"
    }
    [8]=>
    array(10) {
      ["id"]=>
      string(3) "420"
      ["text"]=>
      string(47) "数据结构 队列_队列实例：事件处理"
      ["intro"]=>
      string(288) "目录

ECharts
异步加载



ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [
        "
      ["username"]=>
      string(7) "idreamo"
      ["tagsname"]=>
      string(40) "C语言|数据结构|队列|事件处理"
      ["tagsid"]=>
      string(23) "["246","247","248",395]"
      ["catesname"]=>
      string(12) "数据结构"
      ["catesid"]=>
      string(7) "["133"]"
      ["createtime"]=>
      string(10) "1511397279"
      ["_id"]=>
      string(3) "420"
    }
    [9]=>
    array(10) {
      ["id"]=>
      string(3) "419"
      ["text"]=>
      string(47) "久等了,博客园官方Android客户端发布"
      ["intro"]=>
      string(288) "目录

ECharts
异步加载



ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [
        "
      ["username"]=>
      string(3) "cmt"
      ["tagsname"]=>
      string(0) ""
      ["tagsid"]=>
      string(2) "[]"
      ["catesname"]=>
      string(0) ""
      ["catesid"]=>
      string(2) "[]"
      ["createtime"]=>
      string(10) "1511396549"
      ["_id"]=>
      string(3) "419"
    }
  }
  ["count"]=>
  int(200)
}
222<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title>小程序组件化开发 - 爱码网</title>
     
<meta name="keywords" content="小程序组件化开发" />
<meta name="description" content="目录ECharts异步加载ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/statics/css/base.css?v=2.7" />
<script src="/statics/js/detail.min.js?v=2.2"></script>   
<script>
   $(document).ready(function () { 
		$("img").error(function () {
			$(this).hide();
		}); 
	}); 
</script>
</head>
<body class="home-template dtpg">
<nav class="main-nav clearfix">
    <div class="inner">
        <ul class="nav">
            <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/" title="爱码网">首页</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/1.html" title="前端技术">前端技术</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/9.html" title="编程语言">编程语言</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/31.html" title="人工智能">人工智能</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/41.html" title="运维知识">运维知识</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/52.html" title="资源下载">资源下载</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/68.html" title="常用小工具">常用小工具</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/72.html" title="技术问答">技术问答</a></li>
                    </ul>            
	 
    </div>
</nav><div class="site-wrapper">
 
    <header style="height: auto;padding: 10px 0px;" class="main-header">
        <div style="max-width:910px" class="main-header-content inner">
                        <h1 class="page-title"><a href="/show-204425056.html" title="小程序组件化开发">小程序组件化开发</a></h1>
            
        </div>

    </header>
    <main class="content" role="main">
	

        <div class="leftbox">
    <article class="post tag-uifont tag-webview">
        <header class="post-header">
            <footer class="tc">  
                <time class="post-date" datetime="2021-05-26">2021-05-26</time>
            </footer>
        </header>
        <section class="post-content">
            <div class="contentbef">  
                  
                              </div>

            
                                    
<p><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpNek5DOWhNemd3TjJVMFlqZzVNR0ZpWkRabFlUUTRZV05tWTJNMlpURmtaakU1WlM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpnMk5pODJPVFl5TXpnNE5tWXpOekl6Wm1Sa05HWmpObVprTVdGaVlUVTVaV05tWVM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"></p>
<h3>
<a target="_blank" rel="nofollow"></a>创建-注册-使用</h3>
<p><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpFd055OWlOakZtWW1FNU9HSTBNMk13WlRGaU56aGxZVFE1TWpabU5ETmlNRFJoTXk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 一样需要四个文件<br> 哪个组件需要用，就得在自己的json文件注册<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpZMk5TOWpZV0U0WW1FM09UZzJNMlF5TVRNM1pqVm1OamMzTXpJNVkySTNZalptT1M1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpjeU5TOHpaalUzTm1KaE5qQXpOV1l4WlRRM04yUmlabU5qTm1FMk5qSXdOakUyTlM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 注册完以后既可以用<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpJM05DODRZVGxtTldOa01qWTNORGxqTWpNMk4ySmxOVFV5WW1RMVptRmhOekUxWVM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 这是组件必须有的，证明是组件。</p>
<h3>
<a target="_blank" rel="nofollow"></a>细节</h3>
<p>命名要规范，可以嵌套调用组件<img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpnd05TOHdPRFUyTkRsaE5UQmlaamt5WVRBNE1USmtaR00yTXpjeFpXTmpZekF3TlM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpVNE1pOWxOV0kwTURNeU16bG1PV1JpWlRObFlqZzJZVFV6TlROa1pEQmhNbVV3WlM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpJM05DODNNVFJqWXprMk9UWm1OelZpTldVelpEVmtZMk5oTmpObE1qWTFOakZtWVM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpnMUx6TTRaR1ZrTXpRd1lqQTBNVEV4WkRNellUZ3lOR0U0TTJVNE16TXpZbVExTG5CdVp3PT0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 也可以全局配置，这样每个页面都可以引用组件<img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpRek9TOWxZVEZpT1RaaVpETTNNekl4TTJabU5EaG1PR0k0TXpObE16TmxNall4Tnk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpNek5DODJNR0ptTVdSaU5URmtNalEwTlRjeVpHUXdOREU1WWpOa01tSTBOVGRsWlM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpRek5DODVZMk13WmpjMU1ERTVPVFppT0dWaU9EazVZakEwWVdZME5XRTRZak0yTWk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"></p>
<h3>
<a target="_blank" rel="nofollow"></a>组件的样式细节</h3>
<p><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpJME1TOHpOVEF4TVdJeFl6Wmpaak14TkRnMk56Z3dPVFkxTWpZek1qTTRNMlJrT1M1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpNdlpqRmxZbVF6TkRJeFptVmtNVFUxWWpWbU5EWm1NREUxWTJRMFlqUmxaRE11Y0c1bg==" alt="小程序组件化开发" title="小程序组件化开发"><br> 标签选择器会影响外部。外部用标签选择器也会影响内部<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpVd09TOHpNVGszTVdGaVpqTTJNbVkzTVROak1tRmtaREV6WkRBMlpUUTBaRGhpWkM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 所有用class最好。<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpjeE5TODNOREZpTTJRM09UZzVaR1ExWkRZM1ltWTJZVGxoTVdJM05XTTBOemcwWWk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpRME5pOHlOekV5TkRjNE1EbGlOVFZsWTJJeU1qWXpNbUZtTnpCak9XSTNPRGRpTmk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 页面的js中的对象是pages(),APP.js中的对象是APP(),而组件中的对象则是conponent，<br> apply-shared是默认，外部影响内部，而内部不能影响外部<img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpZMU9DODFaVGxtWVRGa056RmtZakUxTldZd1lqUTJNVFEyTVRJNU5HUmhNV0poWVM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpjMk5pODFNR1l4TVdKalltUXhPV00yT1RVNVpURmhPVFkyWmpnellXVTNaRFJqWlM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 没有影响，<img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpnMk5TOWlOelEwT1RRM056UmtaRGMxWWpFNU9USTBNV1JpTURnMU5tWmtNR1l6T1M1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 外部影响了。<img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpZeU5pODNPVGRrWVRBM00yVTVOV05pTXpkaFl6WTJNMlZrT0dJek5HVXlNek13TWk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 当值为shared时，就可以互相影响。</p>
<h3>
<a target="_blank" rel="nofollow"></a>组件页面通信</h3>
<p><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpFeE5TOHdaRGhrT0RkaE56aGlNMk16TTJJd01qVmxPREppWkdRMk9UQXdaR0prTXk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 传数据。<br> 1 在组件的js里面，value是默认值<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpjdll6WmpZMkU0WVdVMVlXSTJPV1JoTW1Jek9URXhNV0UxWTJObFpEWmhPV1l1Y0c1bg==" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THprNU1DOHlZek0xTmpFMU5tRXpOV1EyTkRCbVkyRmpNemxoTXpVeFlqRmhPVGRoTmk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 2传<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpVeU9TOHpNREZtWTJVeE16RTBabUUxTVdJMFl6WXdNR00yWmpCa09HVm1aVEprT1M1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 3展示<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpFNU1TOWxabVptWmpFM1pUQTRNV0poTVdFeFpEZzFOMlJpTTJNMFl6UTJORGcyTnk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 结果<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpNeE1pOWlPV0k1WkRCak5EUmpOak5qTVRKaE4ySXlPVEJrT1RobU0yTmlNVEZpTUM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpRMU9DODNZVFU1TXpobE9EUXhNbVUwT1dRNVpEZGlNelZqTlRZek9EbGtaREl6WVM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THprNE5pODJNMlJsWldNNU1EQmlZMkV4TXpVd1lUUmhNVE00WW1GbVpUQmpOMk01TWk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 监听值改变，第一次从默认值变成哈哈哈，第二次从哈哈哈变成嘿嘿嘿。</p>
<h3>
<a target="_blank" rel="nofollow"></a>传样式</h3>
<p>1定义 <img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpnNU9TODFPV0k1TWpsak9UZ3lZbVV3WVdVeVpUWXdNalUwWVRCaU5qZGlPR0UxTXk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpZeU1TODNaV1V5TnpkbFlUQmhOVE5qTXpBMlptWmtPRFZqWkRGbFpqVm1PV00zWkM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 在组件内定义好，做好接受的准备<br> 2 传<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpZek1TOHlZell6TUdKbFl6TXhNekE1WXpZNE1UazRaR1kxWXpZeFpUQmtaRFE0Tnk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 在引用组件是顺便传过去，但传过去这个可以看成是传一个类过去，而这个类需要在自己的wxss里面定义。！！！<img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpZd055ODBPV0UzWm1RM05EQXlNamsxWlRZMU9XSTVZakF5WXpRMU5HWTVaamcyWmk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 相当于他自己定义好这个类，再把这个类传过去，而组件只需要做好接接受的准备即可。</p>
<h3>
<a target="_blank" rel="nofollow"></a>组件向外传递事件</h3>
<p>这个事件还是跟vue里面的差不多，其他两个页面的事件都是直接放在外面，而组件的事件需要放在methods里面，<br> 1 首先。在组件里面监听<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpreE5TODFZak0zWXpSa05HSTVOVGt6T0dVM1pUZ3hOR1V3WXpZMU56WXdaamczTXk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 2 监听到后在组件的js文件里处理这个事件，<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpJM09DOHdZVFl5WWpSbVpXRTRNamxqTURsak5qQTBZbUpsWkdFM1lUTmlZVFl5Tmk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> this.triggerEvent是发送事件，第一个是发送的事件名称，第二个是参数。vue中子组件发送事件是。<br> this.$emit(‘事件名称’，传递的值。)<br> 3 发送出去后，在引入组件时顺便用bind:监听，vue里是用@监听，监听到后在作出处理<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpnek1DOWxOekUzT0RZME5EWTNaVEJoTnpJME9HVTVOVFUyTVRJMU9HRmhOakl5Tmk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 4 作出处理，在自己的js文件中处理监听到的子组件发出来的事件。<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpNNU9TOHhaRGc0TWpka01XRm1abUkxTkRnNVpURTVaak14WVRabE5qRmxOVEk0Wmk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 传过来的值放在event的detail里面<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpZNU9DOWtZbVV3TnpVMU5UWmtPV0k0TkdSbE1qazJPRGRqTVRReE1tRTFaRFV3WVM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THprek1DOHdNREkxT1dNeE1URXpNbU0zTlRkaVpqZGxaV1UyWW1SaVkyRmxNRFl3WVM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpVMU5pOHlZVEk1TUdRNFl6UXhZbU0zTW1JNE5qUTRObUprWkRkbFlUaGxZVGt5TkM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"></p>
<h3>
<a target="_blank" rel="nofollow"></a>页面直接调用组件的方法<img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpFeU1DOWxOMkl6TmpVeVlXRXdPVGRtWWpRNE1EVXlZekJqWkRFME5HWTRNREJsT0M1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发">
</h3>
<p>this.selectComponent()就可以访问组件里面的方式</p>
<p><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpJME9DOW1ZbVprTmpBeFptSmhZbU14TVdNM1lXUXdaV0l6T0RZMU9XRTVOR0UxTUM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpJNU1TOWlNRFpqTURobVptWTVZak16TWpCaU1tVXpNVEZoTjJGbU9HVTRNemRsTXk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"></p>
<h3>
<a target="_blank" rel="nofollow"></a>页面的方法修改组建的数据</h3>
<p><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpVM01pOWpaall4TVRVeE1tVTBZMlEyTnpkbE5HSXhaalUyTm1Oa05XVXpaamcxTkM1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 在页面的点击事件直接修改组建的数据，记得要用setData,不然不能达到响应式效果。<br> 但这种方法不可取，最好不要在页面直接修改数据。在组件创建一个方式修改数据，页面直接调用就好<br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpJeU15ODJNR1U0WWpaaE5EUXlZelJrTWpkak16Z3pZV05pTTJRNVptRXdaVEU1Tnk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpjMk5DOHlPRE00TWpsaFpESTJZMlZqWkRKbFpEZ3lOV00yTm1KaE56RmlOR1E0WXk1d2JtYz0=" alt="小程序组件化开发" title="小程序组件化开发"><br> 效果是一样的。</p>
 
                    
            
                <div style="margin-top: 10px;">
                  </div> 
        </section>
	 
        <footer class="post-footer">
            <section class="author">
                                            </section>
        </footer>
        <p class="mt10">相关文章：</p>
        <div style="width: 100%;" class="contentcard">
      
            <div style="width: 100%;height: auto;" class="carditem litem clearfix"> 
                    <ul style="padding-left: 0rem;" class="cardcont">
                                            </ul>
               </div>   
         </div>
    </article>

  

</div>

<div class="rigthbox contentcard mt10">
 
          <div style="height: auto;" class="carditem litem">
    <div class="cardtit">猜你喜欢 </div>
        <ul class="cardcont">
                        </ul>
   </div> 

<div style="height: auto;" class="carditem litem">
    <div class="cardtit">相关资源 </div>
        <ul class="cardcont">
              
                            </ul>
   </div>
   
    <div style="height: auto;" class="carditem litem">
     <div class="cardtit">相似解决方案 </div>
         <ul class="cardcont">
                          </ul>
    </div>
  
   <div style="height: auto;background-color: #ddd;text-align: center;" class="carditem litem">
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140"  data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div> 
   <div  style="height: auto;" class="carditem litem mt20">
    <div class="cardtit">热门标签  </div>
    <div class="tagbox">
                    <a target="_blank" title="Java" href="/default/index/tags?cid=164&cname=Java" >Java</a>
                        <a target="_blank" title="Python" href="/default/index/tags?cid=367&cname=Python" >Python</a>
                        <a target="_blank" title="linux" href="/default/index/tags?cid=274&cname=linux" >linux</a>
                        <a target="_blank" title="javascript" href="/default/index/tags?cid=169&cname=javascript" >javascript</a>
                        <a target="_blank" title="Mysql" href="/default/index/tags?cid=237&cname=Mysql" >Mysql</a>
                        <a target="_blank" title="C#" href="/default/index/tags?cid=187&cname=C%23" >C#</a>
                        <a target="_blank" title="Docker" href="/default/index/tags?cid=243&cname=Docker" >Docker</a>
                        <a target="_blank" title="算法" href="/default/index/tags?cid=344&cname=%E7%AE%97%E6%B3%95" >算法</a>
                        <a target="_blank" title="前端" href="/default/index/tags?cid=160&cname=%E5%89%8D%E7%AB%AF" >前端</a>
                        <a target="_blank" title="SpringBoot" href="/default/index/tags?cid=168&cname=SpringBoot" >SpringBoot</a>
                        <a target="_blank" title="Redis" href="/default/index/tags?cid=227&cname=Redis" >Redis</a>
                        <a target="_blank" title="Vue" href="/default/index/tags?cid=236&cname=Vue" >Vue</a>
                        <a target="_blank" title="spring" href="/default/index/tags?cid=696&cname=spring" >spring</a>
                        <a target="_blank" title="设计模式" href="/default/index/tags?cid=632&cname=%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" >设计模式</a>
                        <a target="_blank" title=".net core" href="/default/index/tags?cid=381&cname=.net+core" >.net core</a>
                        <a target="_blank" title=".net" href="/default/index/tags?cid=300&cname=.net" >.net</a>
                        <a target="_blank" title="kubernetes" href="/default/index/tags?cid=2179&cname=kubernetes" >kubernetes</a>
                        <a target="_blank" title="c++" href="/default/index/tags?cid=312&cname=c%2B%2B" >c++</a>
                        <a target="_blank" title="数据库" href="/default/index/tags?cid=284&cname=%E6%95%B0%E6%8D%AE%E5%BA%93" >数据库</a>
                        <a target="_blank" title="数据结构" href="/default/index/tags?cid=247&cname=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84" >数据结构</a>
                        <a target="_blank" title="大数据" href="/default/index/tags?cid=888&cname=%E5%A4%A7%E6%95%B0%E6%8D%AE" >大数据</a>
                        <a target="_blank" title="js" href="/default/index/tags?cid=159&cname=js" >js</a>
                        <a target="_blank" title="机器学习" href="/default/index/tags?cid=171&cname=%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0" >机器学习</a>
                        <a target="_blank" title="微服务" href="/default/index/tags?cid=832&cname=%E5%BE%AE%E6%9C%8D%E5%8A%A1" >微服务</a>
                        <a target="_blank" title="Android" href="/default/index/tags?cid=282&cname=Android" >Android</a>
                        <a target="_blank" title="Go" href="/default/index/tags?cid=839&cname=Go" >Go</a>
                        <a target="_blank" title="程序员" href="/default/index/tags?cid=327&cname=%E7%A8%8B%E5%BA%8F%E5%91%98" >程序员</a>
                        <a target="_blank" title="面试" href="/default/index/tags?cid=637&cname=%E9%9D%A2%E8%AF%95" >面试</a>
                        <a target="_blank" title="JVM" href="/default/index/tags?cid=727&cname=JVM" >JVM</a>
                        <a target="_blank" title="ASP.net core" href="/default/index/tags?cid=179&cname=ASP.net+core" >ASP.net core</a>
                        <a target="_blank" title="云原生" href="/default/index/tags?cid=22056&cname=%E4%BA%91%E5%8E%9F%E7%94%9F" >云原生</a>
                        <a target="_blank" title="人工智能" href="/default/index/tags?cid=270&cname=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD" >人工智能</a>
                        <a target="_blank" title="后端" href="/default/index/tags?cid=1089&cname=%E5%90%8E%E7%AB%AF" >后端</a>
                        <a target="_blank" title="PHP" href="/default/index/tags?cid=281&cname=PHP" >PHP</a>
                        <a target="_blank" title="git" href="/default/index/tags?cid=226&cname=git" >git</a>
                        <a target="_blank" title="CSS" href="/default/index/tags?cid=817&cname=CSS" >CSS</a>
                        <a target="_blank" title="golang" href="/default/index/tags?cid=409&cname=golang" >golang</a>
                        <a target="_blank" title="k8s" href="/default/index/tags?cid=5067&cname=k8s" >k8s</a>
                        <a target="_blank" title="Nginx" href="/default/index/tags?cid=373&cname=Nginx" >Nginx</a>
                        <a target="_blank" title="Django" href="/default/index/tags?cid=634&cname=Django" >Django</a>
                        <a target="_blank" title="mybatis" href="/default/index/tags?cid=720&cname=mybatis" >mybatis</a>
                        <a target="_blank" title="深度学习" href="/default/index/tags?cid=345&cname=%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0" >深度学习</a>
                        <a target="_blank" title="多线程" href="/default/index/tags?cid=986&cname=%E5%A4%9A%E7%BA%BF%E7%A8%8B" >多线程</a>
                        <a target="_blank" title="React" href="/default/index/tags?cid=560&cname=React" >React</a>
                        <a target="_blank" title="架构" href="/default/index/tags?cid=2070&cname=%E6%9E%B6%E6%9E%84" >架构</a>
                        <a target="_blank" title="devops" href="/default/index/tags?cid=2662&cname=devops" >devops</a>
                        <a target="_blank" title="爬虫" href="/default/index/tags?cid=905&cname=%E7%88%AC%E8%99%AB" >爬虫</a>
                        <a target="_blank" title="云计算" href="/default/index/tags?cid=361&cname=%E4%BA%91%E8%AE%A1%E7%AE%97" >云计算</a>
                        <a target="_blank" title="Spring Boot" href="/default/index/tags?cid=201&cname=Spring+Boot" >Spring Boot</a>
                        <a target="_blank" title="LeetCode" href="/default/index/tags?cid=342&cname=LeetCode" >LeetCode</a>
                </div>
       
   </div>
   
        <div id="rightadbox" style="height: 300px;background-color: #ddd;text-align: center;" class="carditem litem">
            <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140"  data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        </div> 
</div>
<div class="clearfix"></div>
</main>
    
<div class="yllinks alink"></div>
 

<footer class="site-footer clearfix">
<section class="copyright">By &copy; 2026 <a href="/" title="www.likecs.com">likecs</a> 版权所有,<br/>本站所有数据收集于网络如有侵犯到您的权益请联系 进行下架处理1。 </section>
<section class="poweredby">  <a target="_blank" href="https://beian.miit.gov.cn/">粤ICP备22038628号</a>Powered By  WordPress </section>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id: "Je3PjbvUssp6BbvY",ck: "Je3PjbvUssp6BbvY"})</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?2eb031e42d29b7c1a1f16948d2ae2a9f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>  
</div>
<script>
    $(function(){
                    $(".post-content").append('<p style="padding: 20px;color: #cacaca;">来源网络，如有侵犯到您的权益请联系进行下架处理</p>')  
            }) 
</script> 
</body>
</html>