如何在vue页面中引入其他的子组件?(局部引入/全局引入)

        在页面中引入子组件分为局部引入和全局引入,局部引入顾名思义就是只在当前页面引入且只在当前页面显示,全局引入即引入后在所有页面都显示

        首先我们创建两个页面Test.vue和Tset2.vue;

如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第1张图片

        起始效果如下:

如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第2张图片

如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第3张图片

        接下来创建一个头部子组件,

如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第4张图片


 局部引入:

        此处将头部子组件引入Test.vue页面中;如下图:

如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第5张图片

页面显示效果如下:只有Test.vue页面显示该头部子组件。
如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第6张图片如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第7张图片 


 全局引入:

        在src/main.js中; 

如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第8张图片如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第9张图片

页面显示效果如下:

如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第10张图片如何在vue页面中引入其他的子组件?(局部引入/全局引入)_第11张图片 


你可能感兴趣的:(前端开发实战知识点集锦,其他,vue.js,javascript,前端,前端框架)