表单
<template>
<h1>表单</h1>
<form>
<input type="text" v-model="message">
<p> {{ message }}</p>
</form>
<input type="checkbox" id="checkbox" v-model="checked"/>
<label for="checkbox"> {{ checked }} </label>
</template>
<script>
export default {
data(){
return{
message:"",
checked:false
}
}
}
</script>
<div ref="container" class="container"> {{ content }} </div>
<button @click="getElementHandle"> 获取元素 </button>
<input type="texr" ref="username">
<button @click="getUserName">获取数据</button>
methods:{
getElementHandle(){
// innerHTML是原生的JS的DOM功能。this.$refs获取了DOM的信息。
this.$refs.container.innerHTML = "哈哈";
}
}
getUserName(){
console.log(this.$refs.username.value);
}
引入步骤
1.引入组件
script中
import MyComponent from "./components/MyComponent.vue"
2.注入组件
export default {
components:{
MyComponent
}
}
3.显示组件
<template>下
<MyComponent />
可选项是script和style
<template>
<!-- 写模板 -->
</template>
<script>
//写逻辑
</script>
<style>
/*写样式 */
</style>
<script>
import MyComponents from "./components/MyComponents.vue"
export default {
components:{
MyComponents
}
}
</script>
<template>
<MyComponents />
</template>
<style>
</style>
<script>
export default{
data(){
return{
message:"组件基础组成"
}
}
}
</script>
<template>
<div class="container"> {{ message }} </div>
</template>
<style>
.container{
font-size: 30px;
color: red;
}
</style>
<style scoped>
/* 一旦加了scoped就只在当前组件中生效 */
</style>
组件的嵌套
<script>
import Header from "./pages/Header.vue"
import Main from "./pages/Main.vue"
import MyComponents from "./components/MyComponents.vue"
import Aside from "./pages/Aside.vue"
export default {
components:{
// MyComponents,
Header,
Main,
Aside
}
}
</script>
<template>
<!-- <MyComponents /> -->
<Header />
<Main />
<Aside />
</template>
<style>
</style>
<template>
<div class="main">
<h3>Main</h3>
<Article />
<Article />
</div>
</template>
<script>
import Article from "./Article.vue"
export default{
components:{
Article
}
}
</script>
<style scoped>
.main{
float: left;
width: 70%;
height: 600px;
border: 5px solid #999;
box-sizing: border-box;
/* border-top: 0px; */
}
</style>
<template>
<h3>Article</h3>
</template>
<style scoped>
h3{
width: 80%;
margin: 0 auto;
text-align: center;
line-height: 100px;
box-sizing: border-box;
margin-top: 50px;
background: #999;
}
</style>
<template>
<div class="aside">
<h3> Aside </h3>
<Item />
<Item />
<Item />
</div>
</template>
<script>
import Item from "./Item.vue"
export default {
components:{
Item
}
}
</script>
<style scoped>
.aside{
float: right;
width: 30%;
height: 600px;
border: 5px solid #999;
box-sizing: border-box;
border-left: 0;
border-top: 1;
}
</style>
Item.vue
<template>
<h3>Item</h3>
</template>
<style scoped>
h3{
width: 80%;
margin: 0 auto;
text-align: center;
line-height: 100px;
box-sizing: border-box;
margin-top: 10px;
background: #999;
}
</style>
<template>
<h3>Header</h3>
</template>
<style scoped>
h3{
width: 100%;
height: 100px;
border: 5px solid #999;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
</style>
组件注册
createApp(App).mount('#app')
// const app = createApp(App)
// 在这中间写组件的注册
// app.mount('#app')
局部注册，上面讲的三步就是局部注册。
组件的数据传递 _props
组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间可以传递数据的。
传递数据的解决方案就是。props
父组件数据可以传递给子组件，数量没有限制。
如果向传递动态的数据，需要变成b-bind的形式进行传递
三级导入
<script>
import Parent from "./components/Parent.vue"
export default {
components:{
Parent
}
}
</script>
<template>
<Parent />
</template>
<style>
</style>
<template>
<h3>Parent</h3>
<Child title="Parent数据" />
</template>
<script>
import Child from "./Child.vue"
export default{
data(){
return{
}
},
components:{
Child
}
}
</script>
<template>
<h3>Child</h3>
<p> {{ title }} </p>
</template>
<script>
export default{
data(){
return{
}
},
props:["title"]
}
</script>
注意：只能从父集传到子集，但不能反向。
如果向传递数值类型，用v-bind形式
:age="age"
data(){ //data中声明
age:0
//子组件使用props进行接收后就可以使用
props:["title","age"]
使用v-bind传递
使用 props:["names"] 接收
子组件直接使用 <li v-for="(item,index) of names" :key="index"> {{ item }} </li> 使用
传递类型校验
props:{
title:{
type: String
}
}
验证接收的数据是否是规定的类型，如果错误则不予接收。
props:{
title:{
type: [String,Number,Array,Object],
required: true //加这个选项则这个为必选项
},
age:{
type: Number,
default:0
},
UserInfo:{
type:object,
default(){
return {}
}
}，
names:{
type:Array,
default(){
return ["空"] //不给传就返回一个 "空" ，如果是数组或者默认值，要这么写
}
}
}
注意：子组件的函数，不允许修改父组件传过来的数据。
props是只读的。
组件事件
子传父使用自定义事件。
<script>
import ComponentsEvent from "./components/ComponentsEvent.vue"
export default {
components:{
ComponentsEvent
}
}
</script>
<template>
<ComponentsEvent />
</template>
<style>
</style>
<template>
<h3>A事件</h3>
<Child @some-event="getHandle" />
<p> A接收的数据：{{ message }} </p>
</template>
<script>
import Child from "./Child.vue"
export default {
data(){
return{
message:""
}
},
components:{
Child
},
methods:{
getHandle(data){
this.message = data;
}
}
}
</script>
<template>
<h3>Child</h3>
<button @click="sendHandle">传递数据</button>
</template>
<script>
export default{
methods:{
sendHandle(){
this.$emit("someEvent","B的数据")
}
}
}
</script>
小技巧
通过子给父传递参数，子使用watch监听器监听数据，然后通过
this.$emit("searchEvent",newValue)
//第一个参数，是父的函数的映射key。newvalue是返回的值
反馈回父