vue学习-03vue父子组件与ref属性-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

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文章来源地址https://www.toymoban.com/news/detail-732118.html

<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>