vue之$root,$parent

$root

vue状态管理使用vuex,如果项目不大，逻辑不多，name我们没必要用vuex给项目增加难度，只需要用$root设置vue实例的data就行了，如下

main.js

new Vue({

  data(){

    return{

      loading:true

    }

  },

  router,

  store,

  render: h => h(App)

}).$mount('#app')

a.vue

created(){

console.log(this.$root.loading) //获取loading的值

}

b.vue

created(){

this.$root.loading = false; //设置loading的属性

}

$parent

parent能够访问父组件的属性和方法

parent.vue

<template>

    <div>

        <child>

        </child>

    </div>

</template>

<script>

    import child from './child';

    export default {

        components:{

            child

        },

        data(){

            return {

                text:"测试"

            }

        },

    }

</script>

child.vue

<template>

    <div>

        <child>

        </child>

    </div>

</template>

<script>

    import child from './child';

    export default {

        created(){

        console.log(this.$parent.text)//测试（能够获取到父组件的属性和方法）

     }

    }

</script>

巴特西

vue之$root,$parent

$root

$parent

$refs

最新文章

热门文章