这篇文章主要介绍了Vue 组件的挂载与父子组件的传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1：将需要挂载的组件放置在component之中
2：全局挂载在main.js之中
import Vue from 'vue' import App from './App.vue' impor<i style="color:transparent">本文来源gaodai$ma#com搞$代*码6网</i>t getTime from './component/child/getTime' //全局注册 整个项目的组件都可以使用 //注册给整个vue 对象 //引入需要注册的全局组件 //在vue类的方法 component里面进行注册 Vue.component('v-times',getTime); Vue.component('v-times',{ template:"<div>{{msg}}</div>",//字符串的标签模板 data(){ //当前模板的数据 return { msg:"时间" } } }); new Vue({ el: '#app', render: h => h(App) })
3：局部挂载至当前父组件之内
4：父组件传值给子组件
父组件：
<div id="toptitle"> <!--logo子组件是toptitle的子组件--><!--子组件接收值--></div>
子组件：
<div id="logoinfo"> <!--注意此处为:src--><span class="systemname">{{sysname}}</span></div>
5：子组件调用父组件的值
子组件：
<div id="logoinfo"> <!--注意此处为:src--><span class="systemname">{{sysname}}</span></div>
父组件：
<div id="toptitle"> <!--logo子组件是toptitle的子组件 //父组件获取子组件的所有内容 //使用ref获取虚拟的dom来获取子组件 --><!--子组件接收值--></div>
补充知识：vue-router中的组件怎么传递参数
第一种方法params
{ path: '/user/:userid', component: User },
<div> <h2>{{userid}}</h2> // <h3>{{this.$route.params}}</h3></div>
用户 export default { name: 'App', data() { return { userid: 'lisi' } } }
第二种 query
{ path: '/profile', component: Profile }
<div> <h2>我是Profile</h2><h3>{{this.$route.query}}</h3></div>
profile
以上就是Vue 组件的挂载与父子组件的传值实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue 组件的挂载与父子组件的传值实例
转载请注明原文链接：Vue 组件的挂载与父子组件的传值实例
