admin-vue/10-组件化开发/08-父子组件的访问/子组件访问父-根组件($parent-$root)/子组件访问父组件$parents.html

40 lines
844 B
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{content}}
<apps></apps>
</div>
<template id="tpl">
<div>
<button @click="btn()">按钮</button>
</div>
</template>
</body>
<script src="../../../00-tools/JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
content:"这是一个消息",
list: ['这是内容1', "这是内容2", "这是内容3"]
},
components:{
'apps':{
template:"#tpl",
methods: {
btn(){
this.$parent.content="这个消息来自子组件的操作"
}
},
}
}
})
</script>
</html>