一点vue笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_43346055/article/details/109711856

文章目录

参考 https://www.cnblogs.com/shengnan-2017/p/10419050.html

(详细代码看这里哦！)

父组件向子组件传递值

//父->子，把"parentNum: 35"绑定到"deliverParentNum"，传递过去。
//v-bind简写":" 可理解为把参数传递给子组件(子组件可读取)
//v-on简写"@" 绑定事件，可理解为接收子组件参数传递(子组件事件请求)
<my-child :deliverParentNum="ParentNum"></my-child>
...
import MyChild from "./Child"
export default{
    components: {MyChild}
    data() {
        return {
        	parentNum: 35
        };
    }
}

//子组件，通过props，接收参数"deliverParentNum"
<h5>{{deliverParentNum}}</h5>
...
export default{
    data() {...}
    props: {
    	deliverParentNum: Number	//这个Number看起来没有什么用处哦！，可能是变量类型
    }
}

子组件向父组件传递值

(在"子组件"中触发事件，在"父组件"的自定义函数中处理事件。)

//子->父，子组件得到一个"计算属性"，通过"事件addParent"把"计算属性作为参数"传递给父组件。
<button @click="addNum">加1按钮</button>	//触发addNum()方法
...
export default{
    components: {MyChild}
    data() {...}
    props: {...}
    computed: {
    	parentActualNum(){		//计算"属性"，是一个属性
    		return this.deliverParentNum + 1;
    	}
    }
    methods: {
    	AddNum(){				//addNum()方法，得到计算属性，并提交"事件addParentNum"
    		this.$emit("addParentNum", this.parentActualNum);
    	}
    }
}

//父组件，父组件通过"事件addParent"让自定义的"监听器函数(名称随便写哦)"处理传过来的"参数"。
<my-child :deliverParentNum="parentNum" @addParentNum="handler"></my-child>
...
import MyChild from "./Child"
export default{
    components: {MyChild}
    data() {...}
    methods: {
    	handler(actualNum){
    		console.log("子组件传过来的参数是：", actualNum);
    	}
    }
}