<div id="app">
父组件:
<input v-model="val"><br/>
子组件:
<test :test="val"></test>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
test: {
props: ['test'],
template: "<input @click='findParent' v-model='test'/>",
methods: {
findParent: function () {
console.log(this.$parent); //访问根组件
console.log(this.$parent.val); //访问根组件的val属性
console.log(this.$parent.$children.indexOf(this)); //查看当前能否在其父组件的子组件中找到索引
console.log(this.$parent === this.$root); //查看父组件和根组件是不是全等的(因为他的父组件就是根组件)
}
}
}
}
});
</script>
父组件:
<input v-model="val"><br/>
子组件:
<test :test="val"></test>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
test: {
props: ['test'],
template: "<input @click='findParent' v-model='test'/>",
methods: {
findParent: function () {
console.log(this.$parent); //访问根组件
console.log(this.$parent.val); //访问根组件的val属性
console.log(this.$parent.$children.indexOf(this)); //查看当前能否在其父组件的子组件中找到索引
console.log(this.$parent === this.$root); //查看父组件和根组件是不是全等的(因为他的父组件就是根组件)
}
}
}
}
});
</script>