vue中子组件往父组件传值，父组件往子组件传值

vue中子组件往父组件传值：emit

methods: {

add: function() {

this.$emit("showpro", this.list+'我是孩子的值');   // showpro是传往父组件的方法，后面参数是要传过去的参数

}

}

 父组件中

import HelloWorldVue from "./HelloWorld.vue";

<abc @showpro="met" ></abc> // 引用子组建传来的方法 showpro，这个方法即本组件中的met放法，注意这里不要写参数

methods: {

met(data2) {  // 在这里可以直接的打印参数

console.log("data2",data2);

}

}

vue中父组件往子组件传值：props

import HelloWorldVue from "./HelloWorld.vue";

父组件中引用子组件，在这里子组件是<abc>

<template>

<abc v-bind:sunny="title2"></abc>传到子组件中取名为sunny，而引用的值是这个组件中的title2

<template>

export default {

name: "second",

data() {

return {

title2:"我是父组件的值：富士山下"   // 这是字符串类型

};},}

在子组件中：

 

<template>

<p>{{sunny}}</p>

</div>

</template>

export default {

name: "compon",

props:{          // props接受父组件传来的值

sunny:{

type:String,   // 传值的类型

required:true // 固定写法

}}}