Vue初始化、组件、插槽

最新推荐文章于 2023-04-18 14:31:11 发布

LisnmX

最新推荐文章于 2023-04-18 14:31:11 发布

阅读量211

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/LisnmX/article/details/127316210

版权

Vue初始化、组件、插槽

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

Vue初始化、组件、插槽
一、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>