1.2

最新推荐文章于 2024-09-04 18:43:27 发布

m0_63713211

最新推荐文章于 2024-09-04 18:43:27 发布

阅读量144

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_63713211/article/details/128525799

版权

文章讲述了Vue框架中组件的创建与使用，包括Vue.extend用于创建组件构造函数，组件实例的this指向，以及单文件组件的写法。还讨论了props属性用于传递数据，以及如何使用混入(mixin)来复用组件功能。在组件标签上添加ref属性可以获取组件实例或DOM元素。最后提到了生命周期钩子的调用顺序。

摘要由CSDN通过智能技术生成

复习

vuecomponent

<div class="root1">
        <school></school>
        <hello></hello>
    </div>
</body>
<script>
    const school =Vue.extend({
        name:'school',
        template:` 
        <div> <h2>学校名称:{{schoolName}}</h2>
         <h2 >学校地址:{{address}}</h2>
         <button @click="msg">点我看</button>
         </div>
        `,
        data(){
            return {
            schoolName:'西邮',
            address:'西安',
        }
        
      },
      methods:{
        msg(){
          console.log(this)//this 指向的是组件实例对象vc
        }
      }
  
    })

    //定义hello组件
    const hello=Vue.extend({
       template:`
       <div>
        {{msg}}</div>
       `,
       data(){
        return {
          msg:'hello'
        }
       }
    })

    // console.log(school)
    // console.log(hello)
    

    const vm=new Vue({
      el:'.root1',
      components:{
        school,
        hello
      }
    })
    console.log(vm)
</script>

1.school组件本身是一个VueComponent的构造函数是Vue.extend生成的

2.写 <school/>标签会创建school组件的实例对象

3.每次调用Vue.extend 返回的是全新的VueComponent

4.组件配置中 this指向是VueComponent实例对象(简称vc) new vue指向是vue实例对象(简称vm)

内置关系

 <div class="root1">

    </div>
</body>
<script>
     const school =Vue.extend({
        name:'school',
        template:` 
        <div> <h2>学校名称:{{schoolName}}</h2>
         <h2>学校地址:{{address}}</h2>
         </div>
        `,
        data(){
            return {
            schoolName:'西邮',
            address:'西安'
        }
      },
     
    })

    new Vue({
      el:'.root1',
      data:{
        name:'张三'
      }
    })



   

    console.log(school.prototype.__proto__===Vue.prototype) //true
</script>

VueComponent.prototype.__proto__===Vue.prototype

单文件组件写法

分析脚手架

ref配置

<template>
    <div>
   <h1  ref="title">{{ msg }}</h1>
     <button @click="show">点我提示输出上方DOM元素</button>

    <School ref="sch"></School>

    </div>
    
</template>

<script>
import School from './components/School'
export default {
    name: 'App',
    components: {
        School,
        
    },
    data() {
        return {
            msg:'你好'
        }
    },
    methods: {
        show(){
            console.log(this.$refs.title) 
            console.log(this.$refs.sch)   
        }
    }
}

</script>

在HTML标签上添加ref属性输出了真实DOM元素

在组件标签上添加ref属性输出组件实例对象

props配置

App组件

<template>
    <div>
        <!-- 传入数据 -->
        <!-- 传入age时 是字符串数据 要在前面加冒号 会当做表达式执行 在收数据的一方进行改变的时候不出错-->
     <Student name="李四" :age="12"></Student>

    </div>
    
</template>

子组件

//接收数据    尽量不要修改props传入的值
    //简单接收  
    props: ['name', 'age'],

    //接收同时进行限制 对象写法  
    props: {
        name: String,
        age:Number
    },

    //更具体的写法
    props: {
        name: {
            type: String,
            required:true //name是必须的
        },
        age: {
            type: Number,
            default:19   //默认值是19
        }
    }

mixin

mixin.js

//分别暴露
export const mix = {
    methods: {
        show() {
           alert(this.name)
        }
    },
    data() {
        return {
            x:0
        }
    }
}

子组件引入

<script>
import {mix} from '../mixin'
export default {
        name:'Student',
    data() {
        return {
            name: '张三',
            age:21   
        }
    },
    mixins:[mix]
    

}


</script>