Vue组件间的参数传递

1 在项目中创建子组件

在 Components 目录下创建 MyComponent 子组件，并编写

<template>
    <div>
        MyComponent...
        {{ MyTitle }}
        
        <button @click="MyMethod('bye vue')">修改内容</button>
    </div>
</template>

<script>
    export default {
        name: "MyComponent",

        //props:["MyTitle"],

        props:{
            MyTitle:{
                type:String,
                required:true,
                default:'defaultMyTitle'
            },

            MyMethod:{
                type: Function
            }
        }
    }
</script>

<style scoped>
</style>

2 注册子组件

在main.js中注册子组件

//导入子组件
import MyComponent from "./components/MyComponent";
//全局注册
Vue.component("MyComponent",MyComponent)

3 在App.vue中使用组件并传递参数

<template>
  <el-container>
      <MyComponent :MyTitle="msg" :MyMethod="changeMsg"></MyComponent>
  </el-container>
</template>

export default {
 	data(){
    	return {
      		msg:'hello vue!!'
    	}
 	},
  
	methods:{
    	changeMsg(massage){
      		this.msg = massage;
    }
｝

父传子：通过子组件的props部分，来指明可以接收的参数，父组件通过在标签中写明参数的键值对来传递参数。

props是表示一个组件的参数部分，那么props的写法有两种：

​ 1）props:[参数列表]

​ 比如： props:[‘MyProp1’,‘MyProp2’,…]

​ 2）props:{参数名1:{type:String,required:true,default:‘XX’},参数名2:{…}})

子传父：通过方法来传，子传给父，父还可以传给子