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无效,不会影响父组件