vue笔记（三）生命周期、组件（嵌套）、数据传递

生命周期文档

一、生命周期

1、参考一
2、参考二

二、自定义组件

1. 使用：<组件名></组件名>

2. 定义组件：
（1）方法一：官网

let 组件变量名 = Vue.extend({
	template:`<div class="header">我是header组件</div>`
});

（2）方法二（常用）：let 组件变量名 = {};

3. 注册：
（1）全局：

Vue.component('组件名',组件变量名);

（2）局部：

components:{
	组件名:组件变量名
}

4. 示例：
（1）定义的第一种方法及全局注册

<!-- 使用 -->
<v-header></v-header>

//定义和注册：
let Header = Vue.extend({
  name:'别名，可以在调试工具中打印出来，与代码无关'
  template:`<h3>我是头部</h3>`,
  data(){
  	return {
  		'msg':'可以在这里定义数据，到template中使用'
  	}
  }
})
Vue.component('v-header',Header);

（2）定义的第二种方法及全局注册
类似于（1），定义组件的时候都可以写method，data()等；

<!-- 使用 -->
<v-main></v-main>

//定义和注册：
//推荐使用该方法
let mains = {
  template:`<div>内容部分</div>`
}
Vue.component('v-main',mains)

（3）局部注册（注意使用时的变量名及注册时的变量名）

<!-- 使用 -->
<v-foot></v-foot>
<my-foot></my-foot>

//定义和注册：
//推荐使用该方法
let myFoot = {
  template:`<div>最底部</div>`
}
components:{      
  // 'v-foot':foots
  'v-foot':{
    template:'<div>底部</div>'
  },
  myFoot, //相当于'my-foot':myFoot
}

（4）将 template 中的语句写到模板中

<!-- 使用 -->
<div id="app">
  <v-header></v-header>
</div>

<!-- 注意 template 的位置，写在 <div id="#app"></div> 下面 -->
<!-- template 作为组件模板，需要有一个根元素把它包裹起来 -->
<template id="v-header">
	<div>	
		<h3>我是头部组件</h3>
		<p>这是我的数据{{msg}}</p>
		<button @click="show">按钮</button>
	</div>
</template>

let Header = {
	template:`#v-header`,
	data(){
		return {
			'msg':"数据"
		}
	},
	methods:{
		show(){
			alert('方法');
		}
	}
}

let vm = new Vue({
	el:"#app",
	components:{
		'v-header':Header
	}
}

5. 嵌套组件

<div id="app">
  <box></box>
</div>

<template id="box">
  <div>
    <h3>{{msg}}</h3>

    <box-child></box-child>
  </div>
</template>

<template id='boxChild'>
  <div>
    <h3>{{msg}}</h3>
  </div>
</template>

let boxChild = {
    template:`#boxChild`,
    data(){
      return {
        msg:"我是box组件中的子"
      }
    }
  }

let box= {
  template:`#box`,
  data(){
    return {
      msg:"内容组件"
    }
  },
  components:{
    "box-child":boxChild
  }
}

let vm=new Vue({
  el:"#app",
  components:{
    box
  }
})

三、组件之间的数据传递 可参考

赋值之间共享数据和方法：
<子 ref="自定义子名称"></子>
（1）父访问子：this.$refs.自定义子名称.数据名/方法()；
（2）子访问父：this.$parent.数据名/方法()

1. 数据传递的方向
   父 -> 子，子 -> 父，子 -> 子（平级传递）

2. 解决数据传递的方法
   （1）框架（父 <->子）；
   （2）订阅发布模式 （pubsub | 自行封装 | Vue模拟）；
   （3）web 存储（cookie，localStorage，session）；
   （4）存库；
   （5）状态管理；

（1）父 -> 子（属性：props）
父组件中：<子组件名称 自定义属性 = "父数据"></子组件名称>
子组件选项中：

props:['自定义属性']
//或
props:{
	自定义属性：{
		type:String/Boolean/Number等,
		default:"初始值、默认值",
		required:true
	}
}

展示：{{自定义属性}}

（2）子 -> 父
父组件中：<子组件名称 @自定义事件 = "父方法"></子组件名称>
子： this.$emit('自定义事件',子.数据名);
父： methods -> 父方法(接收数据){处理}

<div id="app">
  <div>父组件</div>
  <child @send-parent="getData"></child>
</div>

<template id="child">
  <div>        
    <h3>子组件组件</h3>
    <p>这是我的数据{{msg}}</p>
    <div @click="show">按钮</button>
  </div>
</template>

let child = {
  template:`#child`,
  data:function(){
    return {
      msg:"数据"
    }
  },
  methods:{
    show(){
      alert('方法');
    }
  },
  mounted(){
    this.$emit('send-parent',this.msg);//mounted时数据就被渲染出来了
  } 
}

let vm=new Vue({
  el:"#app",
  components:{      
    child
  },
  methods:{
    getData(data){
      console.log(data)
    }
  }
})

（3）父子之间共享数据和方法
父组件中：<子组件名称 ref="自定义子名称(参数)"></子组件名称>
父访问子：this.$refs.自定义子名称.数据名/方法()
子访问父： this.$parent.数据名/方法()
4.