vue组件创建、传值

组件创建、挂载

1. 创建组件  src/component/footer.vue
2. 引入组件  import Footer from './component/footer'
3.  组件声明	 components: { "v-footer": Footer }
4. 组件的使用 <v-footer></v-footer>

全局组件挂载

1.mian.js 引入
2. 属性注册Vue.component("v-times",getTime);

组件通信

父子传值

父子组件之间 触发自定义事件 在子组件里面触发$emit 父组件里面监听子组件上的自定义事件 执行的是父组件的方法

 	父给子传值

父组件通过属性绑定的方式传值，如果不传值 可以走默认值
父：<v-logo :logoimg="logo" :sysname="name"></v-logo> 绑定logoimg，logo name是变量
子：<img class="logoimg" :src="logoimg" alt /> 获取logoimg

 子组件里面定义props属性接收父组件传递的数据

1. 简单是写法 props:[‘logoimg’,‘sysname’], 这种写法 传递的数据没有类型的约束
2. 约束数据类型的写法 如果数据类型不一致 会报警告
3. 约束数据类型 如果父组件没有传递数据 则走默认值

props:{
      'logoimg':{
          type:String,    
          default:"http://img3.imgtn.bdimg.com/it/u=193212363,371293188&fm=26&gp=0.jpg"
      },
      'sysname':String
  }

子给父传值

父获取子组件所有内容：事件，数据>>>组件的自定义事件：
子组件获取父组件

非父子传递内容：事件车

npm i eventbus

//1.创建一个bus.js文件
// 导入vue 
import Vue from 'vue';
// 导出bus  
export default new Vue();
----------------------------------------------------
//2.使用：
<script>
import bus from 文件路径/bus.js //导入 bus.js
export default {
	methods:{
		openreply(){ //在这里随意写一个方法
	        // 通过eventbus 向(兄弟组件)中传入数据源 （值）
	        bus.$emit('passitem', this.commentItem)
      }
	}
</script>
-------接收兄弟传过来的值
<script>
import bus from 文件路径/bus.js //导入bus.js
export default {
	created() {
    //  $on 接收comment兄弟组件传的参数
    bus.$on("passitem", value => {
      this.commentItem = value; //value就是comment组件传过来的commentItem
    });
  },
}
</script>

动态组件

一个变量控制多个组件进行挂载，组件切换时，保证状态，避免重新渲染

<keep-alive
:include="currentTabname" 需要缓存的组件
:exculde="currentTabname" 除过 某个组件之外缓存其他组件
>
 <component v-bind:is="currentTab"></component>
<!-- currentTabname:"name" 初始值动态替换-->
</keep-alive>

methods:{currentTabComponent :不同的组件}

异步组件

• Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染，

• 异步加载组件写成按需加载—搭配组件的动态绑定

    异步组件声明
  

components: { 
    "v-async": function(resolve, reject) {
      // 下面这种异步加载组件
      setTimeout(function() {resolve(Async);}, 2000);
    }
}    

Vue.component(
  'async-webpack-example',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

不支持import，关闭项目，装 异步加载组件 babelrc 依赖，重启
package.json查看，babelrc配置