vue.js进阶之组件

来源：互联网发布：淘宝举报店铺编辑：程序博客网时间：2024/05/19 21:59

<div id="article_details" class="details">
<div class="article_title">


<h1>
<a href="/sinat_25127047/article/details/53032430">
vue.js进阶之组件
</a>
</h1>
</div>

<div class="article_manage clearfix">
<div class="article_l">

标签：
<a href="http://www.csdn.net/tag/vue" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">vue</a><a href="http://www.csdn.net/tag/vue%e7%bb%84%e4%bb%b6" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">vue组件</a>

</div>
<div class="article_r">
2016-11-09 16:52
978人阅读
 <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)
 <a href="javascript:void(0);" onclick="javascript:collectArticle('vue.js%e8%bf%9b%e9%98%b6%e4%b9%8b%e7%bb%84%e4%bb%b6','53032430');return false;" title="收藏" target="_blank">收藏</a>
 <a href="#report" onclick="javascript:report(53032430,2);return false;" title="举报">举报</a>

</div>
</div>
<div class="embody" style="display:none" id="embody">
本文章已收录于：
<div class="embody_c" id="lib" value="{"err":0,"msg":"ok","data":[]}"></div>
</div>
<style type="text/css">
.embody{
padding:10px 10px 10px;
margin:0 -20px;
border-bottom:solid 1px #ededed;
}
.embody_b{
margin:0 ;
padding:10px 0;
}
.embody .embody_t,.embody .embody_c{
display: inline-block;
margin-right:10px;
}
.embody_t{
font-size: 12px;
color:#999;
}
.embody_c{
font-size: 12px;
}
.embody_c img,.embody_c em{
display: inline-block;
vertical-align: middle;
}
.embody_c img{
width:30px;
height:30px;
}
.embody_c em{
margin: 0 20px 0 10px;
color:#333;
font-style: normal;
}
</style>
<script type="text/javascript">
$(function () {
try
{
var lib = eval("("+$("#lib").attr("value")+")");
var html = "";
if (lib.err == 0) {
$.each(lib.data, function (i) {
var obj = lib.data[i];
//html += '<img src="' + obj.logo + '"/>' + obj.name + "  ";
html += ' <a href="' + obj.url + '" target="_blank">';
html += ' <img src="' + obj.logo + '">';
html += ' ' + obj.name + '';
html += ' </a>';
});
if (html != "") {
setTimeout(function () {
$("#lib").html(html);
$("#embody").show();
}, 100);
}
}
} catch (err)
{ }

});
</script>
<div class="category clearfix">
<div class="category_l">
<img src="http://static.blog.csdn.net/images/category_icon.jpg">
分类：
</div>
<div class="category_r">
<label onclick="GetCategoryArticles('6077298','sinat_25127047','top','53032430');">
javascript（29）
<img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
<img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
<div class="subItem">
<div class="subItem_t"><a href="http://blog.csdn.net/sinat_25127047/article/category/6077298" target="_blank">作者同类文章</a>X</div>
<ul class="subItem_l" id="top_6077298">
</ul>
</div>
</label>
<label onclick="GetCategoryArticles('6439780','sinat_25127047','top','53032430');">
vue（6）
<img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
<img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
<div class="subItem">
<div class="subItem_t"><a href="http://blog.csdn.net/sinat_25127047/article/category/6439780" target="_blank">作者同类文章</a>X</div>
<ul class="subItem_l" id="top_6439780">
</ul>
</div>
</label>
</div>
</div>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/category.js"></script>
<div class="bog_copyright">
版权声明：本文为博主原创文章，未经博主允许不得转载。
</div>






<div style="clear:both"></div><div style="border:solid 1px #ccc; background:#eee; float:left; min-width:200px;padding:4px 10px;">目录<a href="#" title="系统根据文章中H1到H6标签自动生成文章目录">(?)</a><a href="#" onclick="javascript:return openct(this);" title="展开">[+]</a><ol style="display:none;margin-left:14px;padding-left:14px;line-height:160%;"><li><a href="#t0">vue组件基本步骤</a></li><ol><li><a href="#t1">理解</a></li></ol><li><a href="#t2">属性值的传递</a></li><ol><li><a href="#t3">data和props</a></li><ol><li><a href="#t4">data</a></li><li><a href="#t5">关于组件的作用域</a></li><li><a href="#t6">父组件和子组件通信</a></li><ol><li><a href="#t7">a 父元素向子元素通信props</a></li><li><a href="#t8">a 子元素向父元素传递信息自定义事件</a></li></ol></ol></ol><li><a href="#t9">使用slot</a></li></ol></div><div style="clear:both"></div><div id="article_content" class="article_content">
<div class="markdown_views">因为之前的项目用了vue，但是是边学边用，很多细节都不熟悉，比如vue-router，之前也写过vue+browserify构建大型应用。这次写一个vue最强大的功能，就是vue的组件。 
首先推荐一个博客，真的写得非常好，当然官方API也写得很好。 
<a href="http://www.cnblogs.com/keepfool/p/5625583.html">http://www.cnblogs.com/keepfool/p/5625583.html</a>

<h1 id="vue组件基本步骤"><a name="t0"></a>vue组件基本步骤</h1>

这个图也是盗用这个博客的，所以先声明一下，我算是转载吧，哈哈。 
步骤： 
1 、创建组件构造器 
2、注册组件 
3、在Vue实例中使用组件 
<img src="http://img.blog.csdn.net/20161104103141470" alt="这里写图片描述" title=""> 
一个小小的demo来说明一下，这个就是官方的例子：

<pre class="prettyprint" name="code"><code class="hljs applescript has-numbering"><div id="example">
<my-component></my-component>
</div></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets_01.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs cs has-numbering">// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 创建根实例
new Vue({
el: '#example'
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs applescript has-numbering"><div id="example">
<div>A custom component!</div>
</div></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul></pre>

<h2 id="理解"><a name="t1"></a>理解</h2>

<ol>
<li>Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器。 </li>
<li>Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。 </li>
<li>使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。 </li>
<li>组件应该挂载到某个Vue实例下，否则它不会生效。</li>
</ol>

<h1 id="属性值的传递"><a name="t2"></a>属性值的传递</h1>

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

<pre class="prettyprint" name="code"><code class="hljs cs has-numbering">Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '{{ message }}'
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"><child message="hello!"></child></code><ul class="pre-numbering"><li>1</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li></ul></pre>

官网的例子。 
然而如何绑定到style和id呢？

<h2 id="data和props"><a name="t3"></a>data和props</h2>

<h3 id="1data"><a name="t4"></a>1、data</h3>

使用组件Components时，大多数选项可以被传入到 Vue 构造器中，有一个例外： data 必须是函数。因为如果不是函数的，声明多个组件的时候，他们共享的就是同一个data，这样就会乱掉。如果通过函数返回，那么每个组件维持自己的data作用域。该data属性只在其component中可见。

<pre class="prettyprint" name="code"><code class="hljs handlebars has-numbering"><body>
<div id="app">
<my-component>
</my-component>
</div>
<template id="myComponent">
<div>
<h2>{{msg}}</h2>
<button @click="showMsg">Show Message</button>
</div>
</template>
</body>
<script type="text/javascript" src="../dist/vue.js"></script>
<script type="text/javascript" src="../dist/vue-router.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
components: {
'my-component': {
template: '#myComponent',
data: function() {
return {
msg: 'This is a Component!' //Vue中component的data必须通过function() return
}
},
methods: {
showMsg: function() {
alert(this.msg);
}
}
}
}
})
</script></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li></ul></pre>

Component其他感觉和之前用的Vue没什么区别。 
也可以有methods方法，有data，多了props

<h3 id="2关于组件的作用域"><a name="t5"></a>2、关于组件的作用域</h3>

template不是标准的HTML元素，浏览器是不理解这个元素的。 
<img src="http://img.blog.csdn.net/20161109111336619" alt="这里写图片描述" title=""> 
这里还可以看到template

那么Vue是如何让浏览器理解template标签的呢： 
感觉必须是挂载在Vue中，通过Vue解析出这个标签成为浏览器可以理解的元素。 
就像下面这段代码，必须新new 一个Vue，Vue使用myComponent作为components，然后在Vue绑定的app中，这个component就会被解析成浏览器可以阅读的语言。

<pre class="prettyprint" name="code"><code class="hljs lua has-numbering">new Vue({
el: '#app',
components: {
'my-component': {
template: '#myComponent',
data: function() {
return {
msg: 'This is a Component!' //Vue中component的data必须通过function() return
}
},
methods: {
showMsg: function() {
alert(this.msg);
}
}
}
}
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li></ul></pre>

并且vue实例和component的作用域是独立的

<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering">new Vue({
el: '#app',
data:{
display:true //vue实例的display
},
components: {
'my-component': {
template: '#myComponent',
data: function() {
return {
msg: 'This is a Component!',
display: false //component中的display
}
},
methods: {
showMsg: function() {
alert(this.msg);
}
}
}
}
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs handlebars has-numbering"> <div id="app">
<my-component v-show="display">
</my-component>
</div>
<template id="myComponent">
<div>
<h2 v-show="display">{{msg}}</h2>
<button @click="showMsg">Show Message</button>
</div>
</template></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></pre>

运行结果：

<img src="http://img.blog.csdn.net/20161109143552785" alt="这里写图片描述" title=""> 
h2被隐藏了， 
但是my-component没有被隐藏。 
也就是说：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译 
那么父子组件如何进行通信呢？ 
答案是props

<h3 id="3父组件和子组件通信"><a name="t6"></a>3、父组件和子组件通信</h3>

官网的一张图 
<img src="http://img.blog.csdn.net/20161109145600397" alt="这里写图片描述" title=""> 
父组件通过* props* 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

<h4 id="a-父元素向子元素通信props"><a name="t7"></a>a. 父元素向子元素通信：props</h4>

还是刚刚的例子，我们在component中添加了props 
例子1：静态props

<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering">new Vue({
el: '#app',
data:{
display:true
},
components: {
'my-component': {
template: '#myComponent',
props:['parentmsg'], //声明props
data: function() {
return {
msg: 'This is a Component!',
display: false //Vue中component的data必须通过function() return
}
},
methods: {
showMsg: function() {
alert(this.msg);
}
}
}
}
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li></ul></pre>

我们在template中加了一个p，这个p引用父元素的msg，另外说一声Vue中属性绑定这个不识别大小写

<pre class="prettyprint" name="code"><code class="hljs lasso has-numbering"><my-component v-show="display" parentMsg="ParentMsg"></code><ul class="pre-numbering"><li>1</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li></ul></pre>

在浏览器看到就是

<pre class="prettyprint" name="code"><code class="hljs lasso has-numbering"><my-component v-show="display" parentmsg="ParentMsg"></code><ul class="pre-numbering"><li>1</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li></ul></pre>

所以即使你声明了props：[‘parentMsg’]也显示不出来。我的代码是这样

后来看到官方的解释是这样的：

<blockquote>
HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 
kebab-case（短横线隔开）
</blockquote>

<pre class="prettyprint" name="code"><code class="hljs handlebars has-numbering"> <div id="app">
<my-component v-show="display" parentmsg="ParentMsg">
</my-component>
</div>
<template id="myComponent">
<div>
<h2 v-show="display">{{msg}}</h2>
<p>{{parentmsg}}</p>
<button @click="showMsg">Show Message</button>
</div>
</template></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul></pre>

运行结果 
<img src="http://img.blog.csdn.net/20161109150326938" alt="这里写图片描述" title=""> 
这里就是父元素的ParentMsg传递给了component

例子2：动态props 
感觉神奇之处就在这里，用v-bind把刚刚的props绑定起来

<pre class="prettyprint" name="code"><code class="hljs lasso has-numbering"><input type="" name="" v-model="ParentMsg">
<my-component v-show="display" v-bind:parentmsg="ParentMsg">
</my-component>
</div></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul></pre>

这样ParentMsg就根据输入框中的ParentMsg动态变化了。

<pre class="prettyprint" name="code"><code class="hljs lua has-numbering">new Vue({
el: '#app',
data:{
display:true,
ParentMsg:"Hello This is Parent"
},
components: {
'my-component': {
template: '#myComponent',
props:['parentmsg'],
data: function() {
return {
msg: 'This is a Component!',
display: false //Vue中component的data必须通过function() return
}
},
methods: {
showMsg: function() {
alert(this.msg);
}
}
}
}
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul></pre>

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。

通常有两种改变 prop 的情况：

<ol>
<li>prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；</li>
<li>prop 作为需要被转变的原始值传入。</li>
</ol>

<pre class="prettyprint" name="code"><code class="hljs handlebars has-numbering"> <div id="app">
<input type="" name="" v-model="ParentMsg">
<my-component v-show="display" v-bind:parentmsg="ParentMsg">
</my-component>
</div>
<template id="myComponent">
<div>
<h2 v-show="display">{{msg}}</h2>
<p>{{parentmsg}}</p>
<p>{{childprops}}</p>
<button @click="showMsg">Show Message</button>
</div>
</template></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering">new Vue({
el: '#app',
data:{
display:true,
ParentMsg:"Hello This is Parent"
},
components: {
'my-component': {
template: '#myComponent',
props:['parentmsg'],
data: function() {
return {
msg: 'This is a Component!',
childprops:"child:"+this.parentmsg, //可以在data中获取props，并生成新的data
display: false //Vue中component的data必须通过function() return
}
},
methods: {
showMsg: function() {
alert(this.msg);
}
}
}
}
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul></pre>

<h4 id="a-子元素向父元素传递信息自定义事件"><a name="t8"></a>a. 子元素向父元素传递信息：自定义事件</h4>

我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！

<pre class="prettyprint" name="code"><code class="hljs applescript has-numbering">使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件</code><ul class="pre-numbering"><li>1</li><li>2</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs lasso has-numbering"> <button-counter v-on:increment="incrementTotal"></button-counter></code><ul class="pre-numbering"><li>1</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering">Vue.component('button-counter', {
template: '<button v-on:click="increment">{{counter}}</button>',
data: function() {
return {
counter: 0
}
},
methods: {
increment: function() {
alert("increment")
this.counter += 1;
this.$emit('increment');
}
}
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs css has-numbering">new Vue({
el: '#app',
data: {
display: true,
ParentMsg: "Hello This is Parent",
total: 0
},
methods: {
incrementTotal: function() {
alert("incrementTotal")
this.total += 1;
}
},
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li></ul></pre>

先运行increment，再运行incrementTotal 
感觉这两句是非常重要的：

<pre class="prettyprint" name="code"><code class="hljs lasso has-numbering">v-on:increment="incrementTotal"
this.$emit('increment');</code><ul class="pre-numbering"><li>1</li><li>2</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li></ul></pre>

分析，button上面绑定了v-on:click=”increment”，当点击按钮触发increment事件，当increment函数执行完毕，触发incrementTotal函数。全在于 this.$emit(‘increment’); 不然执行完毕increment就完毕了。 
官网的例子：

<pre class="prettyprint" name="code"><code class="hljs handlebars has-numbering"><div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering">Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul></pre>

<img src="http://img.blog.csdn.net/20161109161434438" alt="这里写图片描述" title=""> 
这样点击任意一个button都会调用 incrementTotal。

<pre class="prettyprint" name="code"><code class="hljs lasso has-numbering">input v-model="something"></code><ul class="pre-numbering"><li>1</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li></ul></pre>

其实v-model仅仅是一颗语法糖

<pre class="prettyprint" name="code"><code class="hljs livecodeserver has-numbering"><input v-bind:value="something" v-on:input="something = $event.target.value">
</code><ul class="pre-numbering"><li>1</li><li>2</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li></ul></pre>

所以要让组件的 v-model 生效，它必须：

1.接受一个 value 属性 
2. 在有新的 value 时触发 input 事件

<pre class="prettyprint" name="code"><code class="hljs handlebars has-numbering"><div id="app2">
<currency-input label="Price" v-model="price"></currency-input>
<currency-input label="Shipping" v-model="shipping"></currency-input>
<currency-input label="Handling" v-model="handling"></currency-input>
<currency-input label="Discount" v-model="discount"></currency-input>
<p>Total: ${{ total }}</p>
</div>
<template id="myComponent">
<div>
<h2 v-show="display">{{msg}}</h2>
<p>{{parentmsg}}</p>
<p>{{childprops}}</p>
<button @click="showMsg">Show Message</button>
</div>
</template></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering">Vue.component('currency-input', {
template: '\
<div>\
<label v-if="label">{{ label }}</label>\
$\
<input\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
v-on:focus="selectAll"\
>\
</div>\
',
props: {
value: {
// type: Number,
default: 0
},
label: {
// type: String,
default: ''
}
},
methods: {
updateValue: function (value) {
this.$emit('input', value) //触发input事件
},
selectAll: function (event) {
setTimeout(function () {
event.target.select()
}, 0)
}
}
})

new Vue({
el: '#app2',
data: {
price: 0,
shipping: 0,
handling: 0,
discount: 0
},
computed: {
total: function () {
return ((
this.price * 100 +
this.shipping * 100 +
this.handling * 100 -
this.discount * 100
) / 100).toFixed(2)
}
}
})</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li></ul></pre>

<h1 id="使用slot"><a name="t9"></a>使用slot</h1></div>
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul></ul>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li></li>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>

</div>



<div class="bdsharebuttonbox tracking-ad bdshare-button-style0-16" style="float: right;" data-mod="popu_172" data-bd-bind="1482839958064">
<a href="#" class="bds_more" data-cmd="more" style="background-position:0 0 !important; background-image: url(http://bdimg.share.baidu.com/static/api/img/share/icons_0_16.png?v=d754dcc0.png) !important" target="_blank"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间" style="background-position:0 -52px !important" target="_blank"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博" style="background-position:0 -104px !important" target="_blank"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博" style="background-position:0 -260px !important" target="_blank"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网" style="background-position:0 -208px !important" target="_blank"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信" style="background-position:0 -1612px !important" target="_blank"></a>
</div>
<script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>


<link rel="stylesheet" href="http://static.blog.csdn.net/css/blog_detail.css">





<script type="text/javascript" id="bdshare_js" data="type=tools&uid=1536434" src="http://bdimg.share.baidu.com/static/js/bds_s_v2.js?cdnversion=411900"></script>

<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>


<div id="digg" articleid="53032430">
<dl id="btnDigg" class="digg digg_disable" onclick="btndigga();">

<dt>顶</dt>
<dd>0</dd>
</dl>


<dl id="btnBury" class="digg digg_disable" onclick="btnburya();">

<dt>踩</dt>
<dd>0</dd>
</dl>

</div>
<div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank"> </a> </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank"> </a></div>
<script type="text/javascript">
function btndigga() {
$(".tracking-ad[data-mod='popu_222'] a").click();
}
function btnburya() {
$(".tracking-ad[data-mod='popu_223'] a").click();
}
</script>

<ul class="article_next_prev">
<li class="prev_article">上一篇<a href="/sinat_25127047/article/details/53018497" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian'])">《javascript设计模式与开发实践》阅读笔记（三）</a></li>
<li class="next_article">下一篇<a href="/sinat_25127047/article/details/53126599" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian'])">Vue进阶之组件（二）</a></li>
</ul>

<div style="clear:both; height:10px;"></div>

<div class="similar_article" style="">
<h4>我的同类文章</h4>
<div class="similar_c" style="margin:20px 0px 0px 0px">
<div class="similar_c_t">
<label class="similar_cur">
javascript（29）
</label>
<label class="">
vue（6）
</label>
</div>

<div class="similar_wrap tracking-ad" data-mod="popu_141" style="max-height:195px;">
<a href="http://blog.csdn.net" style="display:none" target="_blank">http://blog.csdn.net</a>
<ul class="similar_list fl"><li>•<a href="http://blog.csdn.net/sinat_25127047/article/details/53589685" id="foot_aritcle_53589685undefined6596082940907746" target="_blank" title="Vue+webpack构建单页router应用（二）">Vue+webpack构建单页router应用（二）</a>2016-12-13<label>阅读37</label></li> <li>•<a href="http://blog.csdn.net/sinat_25127047/article/details/53363504" id="foot_aritcle_53363504undefined9646460238646986" target="_blank" title="bootstrap源码阅读（一）——modal原理">bootstrap源码阅读（一）——modal原理</a>2016-12-12<label>阅读82</label></li> <li>•<a href="http://blog.csdn.net/sinat_25127047/article/details/53018497" id="foot_aritcle_53018497undefined4736525485986096" target="_blank" title="《javascript设计模式与开发实践》阅读笔记（三）">《javascript设计模式与开发实践》阅读笔记（三）</a>2016-11-03<label>阅读52</label></li> <li>•<a href="http://blog.csdn.net/sinat_25127047/article/details/52860179" id="foot_aritcle_52860179undefined40135401996824127" target="_blank" title="《javascript设计模式与开发实践》阅读笔记（一）">《javascript设计模式与开发实践》阅读笔记（一）</a>2016-10-19<label>阅读107</label></li> <li>•<a href="http://blog.csdn.net/sinat_25127047/article/details/52502800" id="foot_aritcle_52502800undefined3063901741797639" target="_blank" title="Javascript模块化编程——使用AMD，CommonJS，ES Harmony">Javascript模块化编程——使用AMD，CommonJS，ES Harmony</a>2016-09-11<label>阅读130</label></li> </ul>

<ul class="similar_list fr"><li>•<a href="http://blog.csdn.net/sinat_25127047/article/details/53535171" id="foot_aritcle_53535171undefined028273206894362746" target="_blank" title="项目中的积累——HTTP跨域问题方案CORS">项目中的积累——HTTP跨域问题方案CORS</a>2016-12-09<label>阅读121</label></li> <li>•<a href="http://blog.csdn.net/sinat_25127047/article/details/53126599" id="foot_aritcle_53126599undefined9798819967736283" target="_blank" title="Vue进阶之组件（二）">Vue进阶之组件（二）</a>2016-11-13<label>阅读351</label></li> <li>•<a href="http://blog.csdn.net/sinat_25127047/article/details/52874532" id="foot_aritcle_52874532undefined3502825940167127" target="_blank" title="《javascript设计模式与开发实践》阅读笔记（二）">《javascript设计模式与开发实践》阅读笔记（二）</a>2016-10-21<label>阅读54</label></li> <li>•<a href="http://blog.csdn.net/sinat_25127047/article/details/52806796" id="foot_aritcle_52806796undefined2777023446939899" target="_blank" title="RequireJS入门指南（二）-vue分页模块抽离">RequireJS入门指南（二）-vue分页模块抽离</a>2016-10-14<label>阅读231</label></li> <li>•<a href="http://blog.csdn.net/sinat_25127047/article/details/52460782" id="foot_aritcle_52460782undefined7093957293948758" target="_blank" title="javascript模块化编程">javascript模块化编程</a>2016-09-07<label>阅读128</label></li> </ul>
<a href="http://blog.csdn.net/sinat_25127047/article/category/6077298" class="MoreArticle">更多文章</a></div>
</div>
</div>
<script type="text/javascript">
$(function () {
GetCategoryArticles('6077298', 'sinat_25127047','foot','53032430');
});
</script>

</div>

0 0