Vue初始化、组件、插槽
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
一、Vue组件
1、脚手架的安装
Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程。
详情参考以下链接
2、组件简介
组件(component)是vue.js最强大的功能之一。组件的作用就是封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件,而且是所有组件的根组件
3、组件的使用
1、组件的创建
1、首先创建编写代码的.vue 文件,编写子组件
2、然后编写一个总领所有组件的App根组件,在其中引入其余子组件
3、创建main.js文件,在其中引入根组件,创建vue对象,
2、组件的引入
基本语句:
import 组件对象 from "组件地址"
3、组件的注册
- 全局注册
. 非单文件的全局注册:
<div id="box">
<div>
<pannel></pannel>
<!-- 使用组件 -->
</div>
</div>
<script>
Vue.component("pannel",{
//另一总写法:const pannel = vue.component{
template:`
<ul>
<li>你好</li>
<student></student>
{{myname}}
<button @click="handleClick()">点击</button>
</ul>
`,
data(){
return {
myname:"李华",
}
},
methods:{
handleClick(){
console.log('你好');
}
},
var vm = new Vue({
el:"#box",
data:{
}
})
</script>
单文件注册(利用脚手架):
html文件源代码:
<div id="#box">
<App></App>
</div>
根组件源代码:
<template>
<div class=''>
<School> </School>
</div>
</template>
<script>
import 组件对象1 from "组件对象地址"
//引入组件对象
export default {
name:App,
data () {
return {
};
},
components: {
School,
},
};
var vm = new Vue({
el="#box",
data:{
student:"李明",
}
})
</script>
<style lang='scss' scoped>
</style>
子组件源代码:
<template>
<div class=''>
<ul>
<li>{{title}}</li>
</ul>
</div>
</template>
<script>
export default {
name:School,
data () {
return {
title:"你好"
};
},
};
</script>
<style lang='scss' scoped>
</style>
注意:
1.组件中的data是一个函数,不是对象
2.组件中必须有一个唯一的根元素
3. 局部注册
非单文件注册:
<body>
<div id="app">
<my-header></my-header>
<my-footer></my-footer>
</div>
</body>
<script>
let myHeader = {
data: function() {
return {
title: "头部标题的内容"
};
},
template: `
<div>
<button @click="handle">点击</button>
<p>{{title}}</p>
</div>
`,
methods: {
handle: function() {
console.log(this.title);
}
}
};
let myFooter = {
data: function() {
return {
title: "底部标题的内容"
};
},
template: `
<div>
<button @click="handle">点击</button>
<p>{{title}}</p>
</div>
`,
methods: {
handle: function() {
console.log(this.title);
}
}
};
var vue = new Vue({
el: "#app",
data: {},
methods: {},
computed: {},
components: {
"my-header": myHeader,
"my-footer": myFooter
}
});
</script>
注意
1.局部注册的子组件只能在注册过的父组件中使用
2.components是注册组件的意思
二、父子组件通信传值
1、组件的嵌套使用
1、组件中定义局部组件,让组件使用在组件中
<!-- 组件嵌套使用 -->
<div id="box">
<div>
<father></father>
<!-- <papa :hello="stylee"></papa> -->
<papa @myevent="handleClick"></papa>
</div>
</div>
<script>
//内部组件
const son = Vue.extend({
template:`
<div>学院:信息科学与技术学院<div>
`,
})
//外部组件
const father = Vue.extend({
//组件嵌套
template:`
<div>学校名称:
<span>{{myname}}</span>
<son> </son>
</div>
`,
data(){
return{
myname:"东北师范大学"
}
},
components:{
son,
}
})
</script>
2.父传子
1、⼦组件中通过定义props接收⽗组件中通过v-bind绑定的数据
<div id="box">
<div>
<papa :hello="stylee"></papa>
</div>
<script>
const papa = Vue.extend({
template:`
<div>{{hello}}
<button @click="handle()">点击</button>
</div>
`,
data(){
return{
}
},
props:["hello"],
})
Vue.component("papa",papa);
var vm = new Vue({
el:"#box",
data:{
stylee:"计算机",
},
</script>
结果展示:
3、子传父
首先在子组件中定义一个事件,并且使用emit发送给父组件,在示例中子组件使用的click事件触发发送自定义事件(myevent)
emit使用方法
this.$emit(‘自定义事件名’,所需要传的值)
<div id="box">
<div>
//利用myevent事件来进行子传父通信
<papa @myevent="handleClick"></papa>
<li :myname="hei">{{hei}}</li>
</div>
</div>
<script>
//定义全局组件
const papa = Vue.extend({
template:`
<div>
<button @click="handle()">点击</button>
</div>
`,
data(){
return{
name:"李华",
}
},
methods:{
handle(){
this.$emit("myevent",this.name);
}
}
})
Vue.component("papa",papa);//声明全局组件
var vm = new Vue({
el:"#box",
data:{
hei:""
},
methods:{
handleClick(data){
this.hei=data;
}
}
})
</script>
4、ref通信
ref可以让父组件更加便利地取到想要的子组件,其中原理和父传子相同,都是取到组件对象
基本格式:
父组件中定义ref
<div>
<child ref="myname"> </child>
</div>
子组件中使用:
console.log( this.refs.myname)
//输出子组件child该标签对像
console.log( this.refs.myname.vallue)
//输出标该签中的value值
<div id="box2">
<input type="text" ref="mytext" @input="handleinput()">
<button @click="handleClick()">上传</button>
<!-- 利用属性myname来进行父亲传信到组件中 -->
<student :myname="text"></student>
</div>
<script>
//定义局部组件student
const student = Vue.extend({
template:`
<div>专业成绩:{{myname}}
<ul>
<li v-for="data in datalist">{{data}}</li>
</ul>
<button @click="handle()">获取</button>
</div>
`,
data(){
return {
datalist:[]
}
},
methods:{
handle(){
this.datalist.push(this.myname);
}
},
props:["myname"],
})
var vm1=new Vue({
el:"#box2",
data:{
text:"",
},
methods:{
//使用ref来获取原标签或者原标签中的属性值
handleClick(){
this.text=this.$refs.mytext.value;
}
},
components:{
student,
}
})
</script>
三、插槽
插槽简介:插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的 部分定义为插槽。
基本格式:
父组件:
<tempalte>
<child>
//插入你想的内容
<ul> </ul>
</child>
</template>
子组件:
vue.component("child"{
<div>
<solt> </solt>
</div>
)}
1、默认插槽
封装组件时,可以为预留的 插槽提供后备内容(默认内容)。如果组件的使用者没有为插槽提供任何 内容,则后备内容会生效。
<div id="next">哇
<child></child>
</div>
<script>
const child = Vue.extend({
template:`
<div>
<solt>默认内容</solt>
</div>
`
})
var vm = new Vue({
el:"#next",
data:{
},
components:{
child,
}
})
</script>
2、具名插槽
如果在封装组件时需要预留多个插槽节点,则需要为每个 插槽指定具体的 name 名称。这种带有具体 名称的插槽叫做“具名插槽”
<div id="next">哇
<child >
<ul slot="footer"> 你好</ul>
</child>
</div>
<script>
const child = Vue.extend({
template:`
<div>
<slot name="footer">默认内容</slot>
</div>
`
})
var vm = new Vue({
el:"#next",
data:{
},
components:{
child,
}
})
</script>
3、作用域插槽
作用域插槽就是带参数(数据)的插槽,强调的则是数据作用的范围
在子组件的插槽中带入参数(数据)提供给父组件使用,该参数(数据)仅在插槽内有效,父组件可以根据子组件中传过来的插槽参数(数据)对展示内容进行定制
使用作用域插槽,数据在子组件中,需要通过数据绑定传给使用者插入html的部分:
<div class="box">
<h4>{{title}}</h4>
<!-- 把数据传给插入的html部分 -->
<slot :movies="movies"></slot>
</div>
此时,在使用者组件中,使用 中的scope="Data"属性将数据传递过来:
<StudyM title="游戏列表">
<template scope="one">
<!-- 第一种结构 -->
<ul>
<li v-for="m,index in one.movies" :key="index">{{m}}</li>
</ul>
</template>
</StudyM>
具体代码:
APP.vue代码
<template>
<div id="app">
<!-- 默认插值 -->
<StudyM title="游戏列表">
<template scope="one">
<!-- 第一种结构 -->
<ul>
<li v-for="m,index in one.movies" :key="index">{{m}}</li>
</ul>
</template>
</StudyM>
<StudyM title="游戏列表">
<template scope="one">
<!-- 第二种结构 -->
<ol>
<li v-for="m,index in one.movies" :key="index">{{m}}</li>
</ol>
</template>
</StudyM>
<StudyM title="游戏列表">
<template scope="one">
<!-- 第三种结构 -->
<h4 v-for="m,index in one.movies" :key="index">{{m}}</h4>
</template>
</StudyM>
</div>
</template>
<script>
//引入组件
import StudyM from './components/StudyM.vue'
export default {
name: 'App',
components: {
StudyM
},
}
</script>
<style scoped>
#app{
display: inline-flex;
justify-content: center;
}
video{
width: 100%;
}
</style>
Study-M .Vue代码
<template>
<div class="box">
<h4>{{title}}</h4>
<!-- 把数据传给插入的html部分 -->
<slot :movies="movies"></slot>
</div>
</template>
<script>
export default {
name:'StudyM',
props:['title'],
data(){
return{
movies:['蜘蛛侠', '复仇者联盟', '金刚狼', '触不可及', '唐人街探案','当幸福来敲门']
}
}
}
</script>
<style scoped>
.box{
margin: 20px;
width: 300px;
padding: 20px;
background-color: aqua;
}
h4{
text-align: center;
background-color: rgb(127, 236, 113);
}
</style>