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

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

methods: {vue

add: function() {ui

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

}字符串

}it

 父组件中io

import HelloWorldVue from "./HelloWorld.vue";console

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

methods: {import

met(data2) {  // 在这里能够直接的打印参数require

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 // 固定写法

}}}