本文主要是介绍【星海出品】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是返回的值
反馈回父
这篇关于【星海出品】VUE（五）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
