【精讲】vue框架 vue脚手架子父组件交互、子父组件构成、main.js文件、知识点补充

共创splendid--与您携手

已于 2022-08-04 18:43:26 修改

阅读量745

点赞数 2

分类专栏： vue框架前端文章标签：前端 javascript html

于 2022-08-04 15:28:30 首次发布

关注博主，为您提供更优质的作品与最全的知识内容

本文链接：https://blog.csdn.net/m0_59505309/article/details/126159160

版权

前端同时被 2 个专栏收录

63 篇文章 3 订阅

订阅专栏

vue框架

39 篇文章 0 订阅

订阅专栏

简介

在讲述组件之前，我们先来谈谈，组件的存放位置以及“暴露”，“接收”数据；暴露的方式是：

接收数据的方式是：

在暴露和接收的基础上，咱们再来讲述子组件的存放位置以及每个组件的使用顺序（用法）：子父组件均都存放在components文件内部

每个组件的使用顺序（方法）：子组件（程序员自己创建的vue组件）---> App父组件（主要用于：将程序员写的所有子组件归总到一起渲染到页面中），在子组件中是利用插值语法或者其它形式展示出来的效果，在父组件中直接使用（这里的直接使用是将数据传入之后通过components:进行包裹之后，做自定义标签插入页面中（HTML）即可展示预期效果）--->下面就是main.js文件，这里主要是调用App.vue文件,将数据整合在一起，形成一个js文件 --->接下来便是HTML文件，这里需要将js文件引入（我们编写的main.js文件）--->页面刷新保存，整合数据，即成功实现页面效果【在之前的每个环节中都有css样式，可以自行添加样式效果除（main.js）不含有】

下面补充一个知识点：<template>包裹HTML内容</template>，<script>包裹js内容（vue）</script>，<style>包裹css样式内容</style>

下面显示截图，个位粉丝可以先自行练习后，再查阅原代码复制粘贴查看源码（代码在底部）

在上面的内容步骤了解后，下面咱们讲述子组件内容：

第一部分：子组件内容

第一个组件名是：DangWenJian.Vue

续：

以上是第一个子组件的结果，让个位粉丝更清晰了解详细过程：

第二个子组件名：HelloWorld.Vue

续：

全局组件示例：

第二部分：父组件

父组件名：app.vue

续：

第三部分： main文件

main.js源文件:

HTML内容下期继续讲述。

源代码部分：根据展示的截图逐一展示源代码

第一个组件名是：DangWenJian.Vue

<template>
<div class="add">
<h2>学生姓名:{{name}},</h2>
<h2>学校年龄:{{age}}</h2>

<h2>{{movie}}</h2>
<h1>{{msg}}</h1>
</div>
</template>

<script>
//1，export default是默认暴露
//2，这里可以省略Vue.extend(后面
export default{
//为了完美些，这里就需要添加name
name:'DangWenJian',
data() {
return {
//这里是schoolName是数据名
name: "尚硅谷",
age: "北京",
}
},
// 所有传入的值进行操作时，就需要使用props去包裹着，否则会报错
props:{
movie:{
type: Array,
default() {
return [1, 2, 3, 4]
}
},
msg:{
type: String,
default: '你是学生吗？',
}
}
}
</script>

<style>
.add{
background-color:pink;
}
</style>

第二个子组件名：HelloWorld.Vue

<template>

<div class="oder">

<h2>一起去:{{ schoolName }},学习</h2>

<h2>学校地址:{{ address }}</h2>

<button @click="showtime">点我提示学校名</button>





<h2>{{ obj }}</h2>

<h1 @click="setbtn">点击提示信息</h1>

</div>

</template>

<script>

//1，export default是默认暴露一般正常情况下，都是采用默认暴露

//2，这里可以省略Vue.extend(后面直接加函数(暴露)即可

export default{

//为了完美些，这里就需要添加name 是组件名

name:'HelloWorde',

data() {

return {

//这里是schoolName是数据名

schoolName: "尚硅谷",

address: "北京",

}

},

// 添加方法属性

methods:{

// 内部添加方法

showtime(){

// 点击之后就会打印schoolName

alert(this.schoolName)

},

//这里是父传子由app传来的数据对饮下面的 props内部的farthername内部的数据，

//然后他会把数据传到方法中来在上面设置了点击事件，所以在这里是方法

setbtn(){

// 指向函数

this.farthername()

}

},

// 注：这里的props不能重复使用，否则就会报错(显示下面的props内容未定义)

props:{

//这里传来的是对象，第一个type是显示你传来的数据是什么类型，这需要自己填，

//若填写错误也会出现错误，这里的作用就是方便后端程序员去交互数据

obj:{

type:Object,

//下面的是数据默认值，在上面的数据没有传时，那么就会执行下面的语句

default() {

return {a:1}

}，

required: true

//这个是必选项，若没有传值那么就必须选择执行默认值

},

//这里是传入一个函数，第一个

farthername:{

// 类型是函数类型

type:Function

}

}

}

</script>

<style>

.oder{

background-color:red;

}

</style>

全局组件示例：

<template>

<div>

<h2>张三</h2>

</div>

</template>

<script>

export default{

name:'Newprom',

}

</script>

父组件名：app.vue

<template>

<div>



<HelloWorld :obj="obj" :farthername="farthername"/>

<DangWenJian :movie="movies" :msg="msg"/>

</div>

</template>

<script>

// 这里是将之前的所有子组件通过暴露的方式将数据接收过来

import HelloWorld from "./components/HelloWorld.vue";

import DangWenJian from "./components/DangWenJian.vue";

// 这里是数据暴露

export default {

name:'App',

data(){

return {

// 下面是数据传出使用，第一个传出的是数组的类型第二个传出的是字符串格式第三个传出的是对象的格式

movies:["复仇者联盟","钢铁侠","星际穿越","娜扎传奇"],

msg:'我是中国人',

obj:{

name:'zhangsan',

age:20

}

}

},

// 下面是将之前的子组件都归总在一起包裹着

components: {

HelloWorld,

DangWenJian,

},

// 这里存放的是methods方法，内部是函数的格式

methods:{

// 这里是函数格式

farthername(){

console.log('我是父组件的方法');

}

}

};

</script>

<style>

</style>

main.js源文件（main.js是一个入口文件）:

import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip = false

// import NewProm from "./components/NewProm.vue";

// vue.component('Newprom',NewProm)

// Vue.component('vue', function) //全局注册第一个是别名，第二个是组件名

new Vue({

render: h => h(App),

}).$mount('#app')