脚本宝典收集整理的这篇文章主要介绍了

vue 父页面向子页面传递数据

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">父页面</h2> <h6>index.vue</h6> <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="<template></p> <div class=&quot;hello&quot;> <Children :name=&quot;name&quot;></Children> </div> <p></template><br /> <script> import Children from '你的路径/Children'; <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { components:{ Children:Children }, data () { return { name:'父页面的数据' } }, </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Children</span> <span class="hljs-attr">:name</span>=<span class="hljs-string">"name"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Children</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> Children <span class="hljs-keyword">from</span> <span class="hljs-string">'你的路径/Children'</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">components</span>:{ <span class="hljs-attr">Children</span>:Children }, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">name</span>:<span class="hljs-string">'父页面的数据'</span> } }, </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h2 id="articleHeader1">子组件</h2> <h5>Children.vue</h5> <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="<template></p> <div> <h2>{{name}}</h2> </p></div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data(){ return{ activeName:1 } }, props:{ name:{ type:String, default:'我是默认值,可以不定义' } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>{{name}}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data(){ <span class="hljs-keyword">return</span>{ <span class="hljs-attr">activeName</span>:<span class="hljs-number">1</span> } }, <span class="hljs-attr">props</span>:{ <span class="hljs-attr">name</span>:{ <span class="hljs-attr">type</span>:<span class="hljs-built_in">String</span>, <span class="hljs-keyword">default</span>:<span class="hljs-string">'我是默认值,可以不定义'</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>props 里定义的内容就是父页面传递过来的数据<br />type 类型可以是String,Number,<a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a>,Object,Boolean<br /><strong>default 默认如果是 <a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a> 或者 Function 必须以 return 的方式定义</strong><br />例:</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="options:{ type:Array, default(){ return [0,1,2,3] } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">options</span>:{ <span class="hljs-attribute">type</span>:<a href="http://www.js-code.com/tag/array" title="浏览关于“Array”的文章" target="_blank" class="tag_link">Array</a>, <span class="hljs-built_in">default</span>(){ return [<span class="hljs-number">0</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>] } }</code></pre> <h2 id="articleHeader2"><a href="https://blog.csdn.net/lucky___star" rel="nofollow noreferrer" target="_blank">更多详细知识介绍请访问我的个人主页</a></h2> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue 父页面向子页面传递数据

全部内容,希望文章能够帮你解决

vue 父页面向子页面传递数据

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过