前端基础之组件

组件：实现应用中局部功能代码和资源的集合

非单文件组件

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<hr>

</div>

//1.创建school组件

const school= Vue.extend({

template:`

<div>

<h2>学校名称:{{schoolName}}</h2>

<button @click="showName">点我提示学校名称</button>

</div>

//不需要创建el配置项

data(){

return{

schoolName:'尚硅谷',

addr:'北京',

}

methods: {

showName(){

alert(this.schoolName)

}

})

//1.创建student组件

const student= Vue.extend({

template:`

<div>

<h2>学生名称:{{studentName}}</h2>

</div>

//不需要创建el配置项

data(){

return{

studentName:'张三',

age:18

}

})

//1.创建hello组件

const hello=Vue.extend({

template:`

<div>

</div>

data(){

return{

name:'tim'

}

})

//2.注册全局组件

Vue.component('hello',hello)

//创建vm

const vm= new Vue({

el:'#root',

data:{

msg:'你好'

//2.组件注册（局部注册）

components: {

school,

student

}

})

</script>

</body>

</html>

组件的结构我们在template中使用。并且使用 ` ` 将其包裹

可以使用name配置项指定组件在开发者工具中呈现的名字

组件标准化写法

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

//定义student组件

const student=Vue.extend({

template:`

<div>

</div>

`,data(){

return{

name:'尚硅谷',

age:18

}

})

//定义school组件

const school=Vue.extend({

template:`

<div>

</div>

`,data(){

return{

name:'尚硅谷',

addr:'北京'

}

//注册子组件，局部

components: {

student

}

})

//注册hello组件

const hello= Vue.extend({

template:`

<div>

</div>

data(){

return{

msg:'hello'

}

})

//创建app组件

const app= Vue.extend({

template:`

<div>

</div>

components:{

school,

hello

}

})

//注册组件

new Vue({

el:'#root',

components: {app}

})

</script>

</body>

</html>

我们在组件的创建的时候，需要将父组件定义在子组件的后面，并且，需要一个统一的app组件来作为所有组件的父组件，然后只将其注册到vm中即可

VueComponent 构造函数

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

//定义school组件

const school=Vue.extend({

template:`

<div>

<button @click="showName">点我提示学校名</button>

</div>

`,data(){

return{

name:'尚硅谷',

addr:'北京'

}

methods: {

showName(){

console.log(this.name,this)

}

})

console.log('@',school)

new Vue({

el:'#root',

components: {

school

}

})

</script>

</body>

</html>

我们定义的组件本质上就是一个名为VueComponent的构造函数，我们在进行<school></school>的时候，vue会自动帮我们执行new VueComponent()

每次调用vue.extend(),放回的都是一个新的VueComponent，

在组件中，启动的this指向的是VueComponent，而在new Vue({})中的则是Vue

VueComponent 与 Vue 联系

VueComponent.prototype.__proto===Vue.prototype ，VC能够同构隐式管理链能多去查找一步

VC也能去访问Vue原型上的属性、方法

也就是说，在Vue中添加的属性，VC通过隐式关系链就能访问到VM中的值

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

Vue.prototype.x=99

const school=Vue.extend({

template:`

<div>

<button @click="showx">点我展示x</button>

</div>

`,data(){

return{

name:'尚硅谷',

addr:'北京'

}

methods: {

showx(){

console.log(this.x)

}

})

console.log('@',school)

const vm= new Vue({

el:'#root',

data:{

msg:'hello'

components: {

school

}

})

</script>

</body>

</html>

单文件组件

项目结构为

Student.vue与School.vue是我们创建的组件，App.vue是用于管理和引入这两个组件的，vm是在main.js中创建并且用于引入App.vue，index.html是文件的总入口和总div的创建

School.vue

<button @click="showName">点我提示学校名称</button>

</div>

</template>

// 组件交互的代码

export default { //对外暴露

name:'School',//与vue文件命名一致

data() {

return {

name: '尚硅谷',

addr: '北京',

}

methods: {

showName() {

alert(this.name)

}

</script>

<style>

/* 组件的样式 */

.demo {

background: orange;

}

</style>

Student.vue

<div >

</div>

</template>

export default {

name:'Student',

data() {

return {

name: '李四',

age:18

}

</script>

App.vue

<div>

</div>

</template>

//引入组件

import School from './School.vue'

import School from './Student.vue'

export default {

name:'App',

components:{

School,

Student

}

</script>

<style>

</style>

main.js

import App from './App.vue'

new VUe({

el:'#root',

template:`<App></App>`,

components: {

App

}

})

index.html

<!DOCTYPE html>

<head>

<title>单文件文件的语法</title>

</head>

<body>

</body>

</html>