01) vue
父组件访问子组件 this.$refs
<div id="app">
{{ message }}
<button value="点击" @click="p_click">点击获取子组件</button>
<children_fei ref="children_ref"> </children_fei>
</div>
<template id="children_foo"> <!--子组件-->
<div><button value="点击">点击</button></div>
</template>
<script src="vue.js"></script>
<script>
const children_fei = {
template: '#children_foo',
data() {
return {
children_message: "我是子组件bar"
}
},
methods: {
}
};
const app = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
p_click:function () { // 访问子组件 children_message
console.log(this.$refs.children_ref.children_message);
}
},
components: {
children_fei
}
});
</script>
02) vue
子组件访问父组件 this.$parent
<div id="app">
{{ message }}
<children_fei> </children_fei>
</div>
<template id="children_foo"> <!--子组件-->
<div><button value="点击" @click="ccc_click">点击</button></div>
</template>
<script src="vue.js"></script>
<script>
const children_fei = {
template: '#children_foo',
data() {
return {children_message: "我是子组件bar"}
},
methods: {
ccc_click: function () {
console.log(this.$parent.message);
}
}
};
const app = new Vue({
el: '#app',
data() {
return {message: 'Hello Vue!'}
},
methods: {},
components: { children_fei }
});
</script>