【星海出品】VUE（五）

表单

表单输入绑定
只需要v-model声明一下这个变量就可以。
还可以选择不同的类型，例如 type="checkbox“
v-model 也提供了 lazy、number、.trim 功能，只需要在v-model后面加入.lazy
例如：v-model.lazy=”message“

<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>

ref用法
获取DOM节点

<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>

App.vue

<script>
import MyComponents from "./components/MyComponents.vue"
export	default {components:{MyComponents}
}  
</script>
<template><MyComponents />
</template>
<style>
</style>

MyComponents.vue

<script>
export default{data(){return{message:"组件基础组成"}}
}
</script><template><div class="container"> {{ message }} </div>
</template><style>.container{font-size: 30px;color: red;
}</style>

scoped

<style scoped>
/* 一旦加了scoped就只在当前组件中生效 */
</style>

组件的嵌套

App.vue #下面包含Main.vue 和 Header.vue

<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>

main.vue #下面还嵌套了 Article.vue

<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>

Article

<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>

Aside

<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>

Header.vue

<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>

组件注册

全局注册 - 局部注册

main.js中去注册组件
这样就不用每个组件都去import 和 export default {components: }
全局注册，注册过，即使没有用到，也会打包到JS中，而且不利于后期维护

createApp(App).mount('#app')
// const app = createApp(App)
// 在这中间写组件的注册
// app.mount('#app')

局部注册，上面讲的三步就是局部注册。

组件的数据传递 _props

组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间可以传递数据的。
传递数据的解决方案就是。props

父组件数据可以传递给子组件，数量没有限制。
如果向传递动态的数据，需要变成b-bind的形式进行传递
三级导入

App.vue

<script>
import Parent from "./components/Parent.vue"
export	default {components:{Parent}
}  
</script><template><Parent />
</template><style></style>

Parent.vue

<template><h3>Parent</h3><Child title="Parent数据" />
</template>
<script>
import Child from "./Child.vue"
export default{data(){return{}},components:{Child}
}
</script>

Child.vue

<template><h3>Child</h3><p> {{ title }} </p>
</template>
<script>
export default{data(){return{}},props:["title"]
}
</script>

props：[“title”]
#这个title要以字符串的形式存在

注意：只能从父集传到子集，但不能反向。
如果向传递数值类型，用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}
}

验证接收的数据是否是规定的类型，如果错误则不予接收。

type 可以验证多个类型
加函数default() 是工厂模式

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是只读的。

组件事件

可以使用 $emit 方法触发自定义事件。
触发自定义事件的目的是组件之间的传递数据。

子传父使用自定义事件。

App.vue

<script>
import ComponentsEvent from "./components/ComponentsEvent.vue"
export	default {components:{ComponentsEvent}
}
</script><template><ComponentsEvent />
</template><style>
</style>

ComponentsEvent.vue

<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>

Child.vue

<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是返回的值

反馈回父

props也可以实现子传父

App.vue

<script>
import ComponentsEvent from "./components/ComponentsEvent.vue"
import ComponentsA from "./components/ComponentsA.vue"
export	default {components:{ComponentsEvent,ComponentsA}
}
</script><template><ComponentsEvent /><ComponentsA />
</template><style>
</style>

ComponentsA.vue

<template><h3>ComponentsA</h3><p> 父元素： {{ message }} </p><ComponentsB title="标题" :onEvent="dataFn"/>    
</template>
<script>
import ComponentsB from "./ComponentsB.vue"export default {components:{ComponentsB},data(){return{message:"父元素"}},methods:{dataFn(data){console.log(data);this.message = data}}
}
</script>

ComponentsB.vue

```js
<template><h3> ComponentsB </h3>    <p> {{ title }} </p><p>  {{ onEvent( "msg" ) }} </p>
</template>
<script>
export default {data(){return{}},props:{title:String,onEvent:Function}
}
</script>

透传Attribute

子组件必须有且是唯一根元素

< ComponentsA class="attr-container" >

子组件禁止继承

<script>
export default {inheritAttrs:false
}
</script>