Vue子组件如何调用父组件的data和方法
2018-11-08 本文已影响16人
___大鱼___
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<com1 :parent="msg" @func1="show"></com1>
</div>
<template id="children">
<div>
<input type="button" value="点击我触发父元素世间" @click="myclick">
我是你的孩子啊 -- {{parent}} <!--获取绑定的parent的值 就是父元素msg 的值-->
</div>
</template>
<script>
var app = new Vue({
el: '#app',
data:{
msg: '看世间荣华富贵'
},
methods: {
show(){
console.log('你调用了我的方法')
}
},
// 定义私有子组件
components:{
com1: {
template: '#children',
methods: {
myclick(){
this.$emit('func1')
}
},
props:['parent'], // 将com1绑定的parent的值传递给子组件，
data: function () {
return {
mag1231: 12313
}
}
},
},
created: function () {
},
mounted: function () {
}
})
</script>
</body>
</html>
