vue父子组件传递信息

<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<router-view></router-view>
{{str}}
<ComponetA :sends="datas" :abcdef="da1" @parnet-child="parnetchilds"></ComponetA>
:sends(向子组件发送相关信息的)

parnet-child子组件向父组件发送相关信息的

</div>
</template>

<script>
import ComponetA from '../src/components/componetA.vue'
export default {
name: 'app',
data(){
return {
str:'',
datas:[
{
name:'网易',
url:'163.com'
},   {
name:'腾讯',
url:'qq.com'
}

],
da1:{
a:12,
b:22
}
}
},
components:{
ComponetA
},
methods:{
parnetchilds(str1){
this.str=str1
}
}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li v-for="item in sends"@click="btn2(item.name)">
{{item.name}}
{{item.url}}
</li>
</ul>
<ul>
<li v-for="items in abcdef" @click="items1">
{{items}}
</li>
</ul>
<button @click="btn1">点击</button>
</div>
</template>

<script>
export default {
name: 'hello',
data () {
return {
msg: '我是父组件'
}
},
props:{
//在父组件中定义的相关类型，数据之类的
sends:{
type:Array,
default:''
},
abcdef:{
type:Object,
default:''
}
},
methods:{
btn1(){
alert(1)
},
btn2(s){

//子向父发送请求
this.$emit('parnet-child',s)
},
items1(){
alert('父传递给子的信息哦')
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 10px;
}

a {
color: #42b983;
}
</style>