vue 生命周期与组件间的传值方法

vue生命周期

vue的生命周期如上图中所示，

beforeCreate - created - beforeMount - mounted(挂载) - beforeUpdate - updated(数据更新) - beforeDestroy - Destroyed

beforeCreate() {
    console.log("beforeCreate");
    //    这里的this指向vue,但data里的数据和methods里的方法还没有绑定到vue实例上，所以是undefined
    console.log(this);
    console.log(this.msg);
    console.log(this.clickEvent);
},
created() {
    console.log("created");
    //    数据data和方法methods绑定到应用对象app上
    console.log(this);
    console.log(this.msg);
    console.log(this.clickEvent);
},
beforeMount() {
    //    渲染之前，根据数据生成的DOM对象是获取不到的
    console.log("beforeMount");
    let dom = document.querySelector('.redBg');
    console.log(dom);
},
mounted() {
    //    渲染之后，可以获取数据生成的DOM对象
    console.log("mounted");
    let dom = document.querySelector('.redBg');
    console.log(dom);
},
beforeUpdate () {
    // 数据更改，但内容未更改之前
  console.log("beforeUpdate");  
},
updated () {
    // 内容已更新完毕
    console.log("updated");
},
beforeDestroy () {
    // 应用销毁之前
  console.log("beforeDestroy");  
},
destroyed () {
    // 应用销毁之后
    console.log('destroyed');
},

组件传值（vuecli）

一、父传子(props)

父组件引用子组件，通过props将值传给子组件

//在父组件中引用子组件  :后面的是传给子组件参数的名字，可以随便取，''里面的是值，这里是个变量，对应data里面的product,也可以直接传值,如:product='"产品"',传给子组件的就是"产品"
<xx :product='product'/>

data(){
    return{
      product: '产品'
    }
}

//子组件
props:{
    //父组件里面的参数名
    product:{
        //该参数值的类型
        type:String,
        //默认值
        default:''
    }
}

除了以上传值外 也可以将父元素的方法传递给子元素，由子元素进行调用，从而修改父元素的数据

//父组件
<xx :action='changeEvent'/>

methods: {
    changeEvent(data){
		//打印121212
       console.log(data)
    }
}

//子组件
props:{
    //父组件里面的参数名
    action:{
        //该参数值的类型
        type:Function,
        //默认值
        default:()=>{}
    }
}
mounted(){
	//调用父组件传来的方法
	this.action('121212')
}

父组件除了传值给子组件外，还可以直接调用子组件里的方法或值

//父组件  ref相当于取名字 给子组件取个名字
<xx ref='test'/>

methods:{
	xx(){
		//调用子组件里面的chooseEvent方法 this.$refs.test即通过取的test名找到子组件，然后就可以调用子组件里面的方法和值啦
		this.$refs.test.chooseEvent()
		//修改子组件里的value值
		this.$refs.test.value = '121212'
		
		//注：$refs必须要等元素都挂载到vue后才能执行 才会找到元素 如果想在挂载之前调用，可以加this.$nextTick(()=>{this.$refs.xx})方法

	}
}

二、子传父($emit)

子组件传值给父组件，使用this.$emit()方法

//子组件
methods: {
    chooseEvent(schoolName){
        console.log(schoolName);
        // 需要将子元素的数据传递给父元素，需要自定义触发事件，实现数据的传值
        // 触发一个事件名称叫做cschool的事件,schoolName即为传的值
        this.$emit('cschool', schoolName);
    }
}

//父组件 @后面的即是子组件传来的事件名 ''里面的是自定义事件名  随便取
<xx @cschool='cschool'/>

methods: {
	//方法名对应上方''里面的名称  value就是父组件传来的值即schoolName
    cschool(value){
        console.log(value);
    }
}

既然父组件可以直接调用子组件里面的方法 那子组件也可以直接调用父组件里面的方法或值吗？ 答案是当然可以

使用$parent就可以，组件可以通过$parent属性找到父元素的vue对象

//子组件
methods: {
    chooseEvent(schoolName){
		//调用父组件的changeEvent方法 并将schoolName传值给父组件
        this.$parent.changeEvent(schoolName)
		//改变父组件里面的value值
		this.$parent.num = '121212'
    }
}

//父组件
data(){
	return{
		num:''
	}
},
methods: {
    changeEvent(value){
       console.log(value)
        //输出121212
        console.log(this.num)
    }
}

三、没有关系的组件之间传值

没有关系组件之间的传值需要通过它们之间共有的组件转化为父传子或子传父方式

//这里xx组件想要传某个值给yy组件  因为他们的父组件一样，同时引入了这两个组件  xx组件需要先将值通过子传父的方式传给父组件  再由父组件通过子传父方式传给yy组件
<xx />
<yy />

可见这种方式过于繁琐 所以有另一种方式方便又简单 它就是vuex，用来解决多个组件共享状态的情况。好了，就暂时分享到这里吧，vuex相关的知识点会放在后面的分享中，欢迎大家对此次相关的分享进行补充！