vue components and communications

vue components and communications

View on a front-end vue based learning

1. Custom Component Object

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

2. Registration component

   • Global registration component

     Vue.component("MyComponent", myComponent);
     

   • Component parts Sign up

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

3. Communication between components

   • Parent child transmission

     By custom event triggers the parent component will be passed
     data is transferred through the parameter;

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

   • Father to son

     props, on the parent component through custom bind attribute names, values ​​can be obtained in the props,

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

4. Unidirectional data stream vue

   • Binding unidirectional downlink, props change parent component, sub-assembly would be changed, modified props itself ineffective in the subassembly will not affect the parent component

View the next vue life cycle