Vue通过ref父子组件拿值

父拿子的值


<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js">script>
head>
<body>
<div id="box">
    <v-tpl1>v-tpl1>
div>
<template id="tpl1">
    <div>
        <p>{{msg1}}p>
        
        <button @click="getChild">父拿子的值button>
        
        <v-tpl2 ref="shit">v-tpl2>
    div>
template>
<template id="tpl2">
    <p>{{msg2}}p>
template>
<script>
    new Vue({
        el: '#box',
        components: {
            'v-tpl1': {
                template: '#tpl1',
                data(){
                    return {
                        msg1: 'msg1'
                    }
                },
                methods: {
                    //父组件定义一个方法通过refs拿到子组件的值
                    getChild(){
                        console.log(this.$refs.shit.msg2)
                    }
                },
                components: {
                    'v-tpl2': {
                        template: '#tpl2',
                        data(){
                            return {
                                msg2: 'msg2'
                            }
                        }
                    }
                }
            }
        }
    })
script>
body>
html>

子拿父的值


<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js">script>
head>
<body>
<div id="box">
    <v-tpl1>v-tpl1>
div>
<template id="tpl1">
    <div>
        <v-tpl2>v-tpl2>
    div>
template>
<template id="tpl2">
    <div>
        <button @click="getParent">子拿父的值button>
        <p>{{msg2}}p>
    div>
template>
<script>
    new Vue({
        el: '#box',
        components: {
            'v-tpl1': {
                template: '#tpl1',
                data(){
                    return {
                        msg1: 'msg1'
                    }
                },
                components: {
                    'v-tpl2': {
                        template: '#tpl2',
                        data(){
                            return {
                                msg2: 'msg2'
                            }
                        },
                        methods:{
                            getParent(){
                                console.log(this.$parent.msg1)
                            }
                        }
                    }
                }
            }
        }
    })
script>
body>
html>

有了ref拿值不能更方便~

你可能感兴趣的:(vue)