建立关系：
在components里创建一个组件
再去views里创建一个页面
渲染页面
第一步：App.vue里写入对应得代码
如
第二步
在router/index.js也写入对应的代码
如：
import LiView from "../views/LiView.vue";
}
path: "/Li",
name: "Li",
component: LiView,
},
数据渲染到页面上是
渲染一下
<Li>{ {li}}</Li>
然后在页面里
引用主键import 组件（首字母大写） from 路径
import Home from "../components/HelloWorld.vue"注册组件 components：{组件名（自己起）与data同级
export default {
components:{
Home
},使用组件：组件是一个标签 （单双都可以）
<template>
<div>
<Home></Home>
</div>
</template>组件传值分为
父子传值
父类的工作
首先主键建立关系（与上面的步骤一样创建关系是）
使用组件的地方 使用属性绑定
<template>
<div>
<Grety :huy="log"></Grety>
</div>
</template>子类的工作
使用props接收父类传出的值
export default {
props: ["huy"]
}
完整的代码演示
这是父类的代码
<template>
<div>
<Homy :hji="name"></Homy>
</div>
</template>
<script>
//
import Homy from "../components/Homy.vue";
export default {
components: {
Homy
},
data() {
return {
name:"这是父传子"
}
},
}
</script>
<style scoped>
/* 添加你的样式 */
</style>
这是子类的代码
<template>
<div>
nfjshvskvj
{
{hji}}
</div>
</template>
<script>
export default {
props:["hji"]
}
</script>
<style scoped>
/* 添加你的样式 */
</style>
子父传值
子类工作
主要作用与点击方法进行
定义方法
在方法里使用this.$emit(自定义的事件名，传递的值）
export default {
data() {
return {
ghy:"文字是人类用表义符号记录表达信息以传之久远的方式和工具。现代文字多是记录语言的工具，人类往往先有口头的语言后产生书面的文字，很多小语种，有语言但没有文字。 文与字 东汉许慎《〈说文解字〉叙》：“盖依类象形，故谓之文；其后形声相益，即谓之字，”也就是说，“文”是独体"
}
},
methods:{
lohing(){
this.$emit("yyru",this.ghy)
}
}父类的工作
在使用组建的地方（组件标签内） @自定义的事件名="自定义的方法名"
<template>
<div>
<Home @yyru ="kuy"></Home>
</div>
</template>在methods定义方法使用形参接收
methods: {
kuy(vue){
console.log(vue);
}
},完整的代码演示
这是子类的代码
<template>
<div>
账号：<input type="text" v-model="username"><br>
密码：<input type="password" v-model="password"><br>
<el-button type="primary" @click="emitData">登录</el-button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
emitData() {
this.$emit('hdh', { username: this.username, password: this.password });
}
}
}
</script>
<style scoped>
/* 添加你的样式 */
</style>
这是父类的代码
<template>
<HelloWorld @hdh="djj"></HelloWorld>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
components:{
HelloWorld
},
methods:{
djj(vue){
console.log(vue);
}
}
}
</script>
<style>
</style>