vue学习-03vue父子组件与ref属性

本篇开始，我们将复习一下上篇的组件引入：
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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)//渲染容器
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24