vue的组件与通讯

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

自定义组件对象

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

注册组件

全局注册组件

Vue.component("MyComponent", myComponent);

局部注册组件

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

组件间通讯

子传父

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

父组件 <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>" }

vue的单向数据流

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

查看下一篇 vue的生命周期