vue的组件与通讯

vue的组件与通讯

查看上一篇 前端vue基础学习

1. 自定义组件对象

   const myComponent = {
   			template: `<button>按钮 {{ message }}</button>`,
   			// 组件中的 data 是一个函数
   			data() {
   				return {
   					message: "hello"
   				}
   			}
   		}
   

2. 注册组件

   • 全局注册组件

     Vue.component("MyComponent", myComponent);
     

   • 局部注册组件

     const vm = new Vue({
     			el: "#app",
     			data: {
     
     			},
     			// 局部注册组件
     			components: {
     				MyComponent : myComponent
     			}
     		});
     

3. 组件间通讯

   • 子传父

     通过触发父组件的的自定义事件将要传递
     的数据通过参数传递；

     父组件
     <to-do
     @todo="(a)=>{console.log(a)}"//123
     ></to-do>
     子组件
     <div
     @Click="$emit('todo',123)"
     ></div>
     

   • 父传子

     props，在父组件上通过自定义的bind的属性名，值可以在props中获取到，

     父组件
     <to-do
     ：value=1
     ></to-do>
     子组件
     components{
     props:["value"]
     template:"<div
     @Click="alert(value)"//1
     ></div>"
     }
     
     

4. vue的单向数据流

   • 单向下行绑定，父组件props改变，子组件会相应改变，在子组件中修改自身的props无效，不会影响父组件

查看下一篇 vue的生命周期