Vue父组件传值子组件

局部：

父组件部分

<template>标签部分

<Child v-bind:ANavigation="ANavigation" v-bind:BNavigation="BNavigation"></Child>

<script>标签部分

引入子组件：

import NavigationBarChild from '../components/ChildPrimaryKey/NavigationBarChild'

注册：

components: {  Child: NavigationBarChild },

在data return 中给对象赋值；

 

子组件部分：

 

通过props 获取到父组件传递过来的值;

 

全局：

<template>

<ComponentA  v-bind:ANavigation="ANavigation" v-bind:BNavigation="BNavigation"></ComponentA>

data(){return{}}

ANavigation: '用户列表', BNavigation: '后台用户列表',

 

在main.js文件的 new Vue({ 之前引入组件

import ComponentA from '../src/components/ChildPrimaryKey/NavigationBarChild'

/* 注册为全局可用 */

Vue.component('ComponentA', ComponentA)

 

子组件NavigationBarChild 部分和局部的一样：

局部和全局的实现的主要区别在引入子组件和注册的文件不一样；局部在哪个文件用就在哪个文件引和注册，全局在main.js 引一次，全局都可以使用；