<p><code></p> <p><strong>vue组件:一些知识点的记录</strong></p> <p><strong>1. 全局组件</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<aaa></aaa><br /> var Aaa=<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.extend({<br /> template:'</p> <h3>我是标题3</h3> <p>'<br /> });</p> <p>Vue.component('aaa',Aaa);</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">aaa</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">aaa</span>&gt;</span> var Aaa=<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.extend({ template:'<span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>我是标题3<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>' }); Vue.component('aaa',Aaa); </code></pre> <blockquote> <p>*组件里面放数据: data必须是函数的形式,函数必须返回一个对象(json)</p> </blockquote> <p><strong>2. 局部组件</strong>:放到某个组件内部</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var vm=new Vue({ el:'#box', data:{ bSign:true }, components:{ //局部组件 aaa:Aaa } }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">var</span> <span class="hljs-string">vm=new Vue({</span> <span class="hljs-attr">el</span>:<span class="hljs-string">'#box',</span> <span class="hljs-attr">data</span>:<span class="hljs-string">{</span> <span class="hljs-attr">bSign</span>:<span class="hljs-string">true</span> <span class="hljs-attr">},</span> <span class="hljs-attr">components</span>:<span class="hljs-string">{ //局部组件</span> <span class="hljs-attr">aaa</span>:<span class="hljs-string">Aaa</span> <span class="hljs-attr">}</span> <span class="hljs-attr">});</span> </code></pre> <hr> <p>另一种编写方式:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.component('my-aaa',{<br /> template:'<strong>好</strong>'<br /> });</p> <p> var vm=new Vue({<br /> el:'#box',<br /> components:{<br /> 'my-aaa':{<br /> template:'</p> <h2>标题2</h2> <p>'<br /> }<br /> }<br /> });<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> Vue.component(<span class="hljs-string">'my-aaa'</span>,{ template:<span class="hljs-string">'&lt;strong&gt;好&lt;/strong&gt;'</span> }); <span class="hljs-keyword">var</span> vm=<span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">'#box'</span>, components:{ <span class="hljs-string">'my-aaa'</span>:{ template:<span class="hljs-string">'&lt;h2&gt;标题2&lt;/h2&gt;'</span> } } }); </code></pre> <hr> <p><strong>配合模板:</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1. template:' <h2 @click=&quot;change&quot;>标题2->{{msg}}</h2> <p>'</p> <p>2. 单独放到某个地方-[推荐]<br /> a). <script type=&quot;x-template&quot; id=&quot;aaa&quot;></p> <h2 @click=&quot;change&quot;>标题2->{{msg}}</h2> <p> </script><br /> b). <template id=&quot;aaa&quot;> </p> <h1>标题1</h1> <ul> <li v-for=&quot;val in arr&quot;> {{val}} </li> </ul> <p> </template><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>1. template:'<span class="hljs-tag">&lt;<span class="hljs-name">h2</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"change"</span>&gt;</span>标题2-&gt;{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>' 2. 单独放到某个地方-[推荐] a). <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"x-template"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"aaa"</span>&gt;</span><span class="xml"> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"change"</span>&gt;</span>标题2-&gt;{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> b). <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"aaa"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>标题1<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"val in arr"</span>&gt;</span> {{val}} <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> </code></pre> <hr> <p><strong>动态组件:</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<component :is=&quot;组件名称&quot;></component><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code>&lt;component <span class="hljs-symbol">:is=<span class="hljs-string">"组件名称"</span>&gt;&lt;/component&gt;</span> </code></pre> <hr> <blockquote> <p>vue-devtools -&gt; 调试工具</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">https:</span><span class="hljs-comment">//chrome.google.com/webstore/detail/<a href="http://www.js-code.com/tag/vuejs" title="浏览关于“vuejs”的文章" target="_blank" class="tag_link">vuejs</a>-devtools/nhdogjmejiglipccpnnnanhbledajbpd</span></code></pre> </blockquote> <hr> <blockquote> <p>vue默认情况下,子组件也没法访问父组件数据</p> </blockquote> <hr> <p><strong>组件数据传递: √</strong></p> <p><strong>1. 子组件就想获取父组件data</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="在调用子组件: <bbb :m=&quot;数据&quot;></bbb></p> <p>子组件之内:<br /> props:['m','myMsg']</p> <p> props:{<br /> 'm':String,<br /> 'myMsg':Number<br /> }<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code>在调用子组件: &lt;bbb <span class="hljs-symbol">:m=<span class="hljs-string">"数据"</span>&gt;&lt;/bbb&gt;</span> 子组件之内: <span class="hljs-symbol">props:</span>[<span class="hljs-string">'m'</span>,<span class="hljs-string">'myMsg'</span>] <span class="hljs-symbol">props:</span>{ <span class="hljs-string">'m'</span><span class="hljs-symbol">:String</span>, <span class="hljs-string">'myMsg'</span><span class="hljs-symbol">:Number</span> } </code></pre> <p><strong>2. 父级获取子级数据</strong></p> <blockquote> <p>*子组件把自己的数据,发送到父级</p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vm.$emit(事件名,数据); v-on: @ " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code>vm.$emit(事件名,数据); v-<span class="hljs-string">on:</span> @ </code></pre> <hr> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vm.$dispatch(事件名,数据) 子级向父级发送数据 vm.$broadcast(事件名,数据) 父级向子级广播数据 配合: event:{} 在vue2.0里面已经,报废了 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code>vm.$dispatch(事件名,数据) 子级向父级发送数据 vm.$broadcast(事件名,数据) 父级向子级广播数据 配合: event:{} 在vue2.<span class="hljs-number">0</span>里面已经,报废了 </code></pre> <hr> <p><strong>slot:</strong></p> <blockquote> <p><strong>位置、槽口 作用: 占个位置</strong></p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="类似ng里面 transclude (指令) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>类似ng里面 transclude (指令) </code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25229.html