本篇开始，我们将复习一下上篇的组件引入：
App.vue
<template>
<div>
<img src="./assets/logo.png" alt="logo">
<!-- 编写组件标签 -->
<School></School>
<Student></Student>
</div>
</template>
<script>
//引入组件。语法：import 组件名 from '组件的路径'
import School from './components/School.vue'
import Student from './components/Student.vue'
//暴露App(父)组件
export default {
name: 'App',
//注册子组件
components:{
School,
Student
}
}
</script>
components/
School.vue
<template>
<div class="demo">
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点击我提示学校名</button>
</div>
</template>
<script>
export default {//将组件暴露出去(一般我们都是用默认暴露)
name:'School',//在开发者工具呈现出的组件名
data() {
return {
schoolName:'罗小黑',
address:'湖南衡阳'
}
},
methods: {
showName() {
alert(this.schoolName);
}
}
};
//export default school;//定义好的组件要想被别人调用，一定要将其暴露出来！！！！
</script>
<style>
.demo{
background-color: orange;
}
</style>
Student.vue
//组件的结构
<template>
<div class="demo2">
<h2>学生名字：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
<button @click="showName">点击我提示学生名字</button>
</div>
</template>
<script>
export default {//将组件暴露出去(一般我们都是用默认暴露)
name:'Student',//在开发者工具呈现出的组件名
data() {
return {
studentName:'张三',
age:18
}
},
methods: {
showName() {
alert(this.studentName);
}
}
};
//export default school;//定义好的组件要想被别人调用，一定要将其暴露出来！！！！
</script>
<style>
.demo2{
background-color: skyblue;
}
</style>
main.js
/**
* 该文件为整个项目的入口文件
*/
//引入vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建vue实例对象vm
/**
* 关于不同版本的Vue:
* 1.vue.js和vue.runtime.xxx.js的区别:
* (1).vue.js是完整版的Vue，包含:核心功能+模板解析器。
* (2).vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。
* 2.因为vue.runtime.xxx.js没任何模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。
*/
new Vue({
el:'#app',
//下面这段代码一会解释，完成这个功能：将App组件放入到容器中
//render: h => h(App),箭头函数
/**
* render是一个函数，必须要有返回值
*/
//创建并渲染元素
render(createElement) {
return createElement(App);
},
});
// eslint-disable-next-line no-unused-vars
let person={name:'张三',age:18};
ref属性
main.js
//引入Vue
import Vue from 'vue';
//引入App
import App from './App.vue';
//关闭Vue的生产提示信息
Vue.config.productionTip=false;
//创建vm实例对象
const vm = new Vue({
el:'#app',
render: h => h(App)//渲染容器
});
App.vue，将最上边的App.vue调整为以下内容
<template>
<div>
<h2 v-text="msg" ref="title"></h2>
<!-- 编写组件标签 -->
<School ref="sch"></School>
<!-- 编写组件标签 -->
<Student></Student>
<button ref="btn" @click="showDOM">点击我输出上面的DOM元素</button>
</div>
</template>
<script>
//引入School组件
import School from './components/School.vue'
//引入Student组件
import Student from './components/Student.vue'
export default {
name: 'App',
//注册组件
components:{
School,
Student
},
data() {
return {
msg:'欢迎学习Vue！'
}
},
methods:{
showDOM(){
console.log(this);
console.log(this.$refs.title);//真实的DOM元素
console.log(this.$refs.sch);//真实的DOM元素
console.log(this.$refs.btn);//School组件的实例对象(vc)
}
}
}
</script>
<style>
</style>
school.vue
<template>
<div class="demo">
<h2>学校名字:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
//以默认的形式暴露组件
export default {
name:'School',
data() {
return {
name:'罗小黑',
address:'湖南衡阳'
}
}
}
</script>
<style>
.demo{
background-color: skyblue;
}
</style>
student.vue
<template>
<div class="demo2">
<h2>学生姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
</div>
</template>
<script>
//暴露组件(默认暴露形式)
export default {
name:'Student',
data() {
return {
name:'张三',
age:18
}
}
}
</script>
<style>
.demo2{
background-color: orange;
}
</style>
