Vue ref方式父子組件傳值方法
<!doctype 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>
? <p>{{msg1}}</p>
? <!--觸發(fā)拿子組件值的函數(shù)-->
? <button @click="getChild">父拿子的值</button>
? <!--通過ref綁定子組件的值-->
? <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>
子拿父的值
<!doctype 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>
