1.父子组件件数据传递:props
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的 props 选项。
子组件要显式地用 props
选项声明它期待获得的数据:
|
然后我们可以这样向它传入一个普通字符串:
|
结果:hello!;
通过这个我们可以得出 组件是相互孤立,互不影响的。
export
default {
name:
'Concat',
components: {
child: {
props: [
'datas',
'title'],
template:
'<div>{{msg}}<span>{{title}}</span></div>',
data () {
return {msg: JSON.stringify(
this.datas) +
'zxvv'}
},
computed: {
}
}
},
data () {
return {
title:
'标题',
datas: {
test1:
'aa',
test2:
'bb'
}
}
}
}
<child
:datas="datas"
:title="title"
></child>
这样就可以去到父组件中的datas 和 title
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。
2.子组件向父组件传递数据
export
default {
name:
'Concat',
components: {
child: {
template:
`<div><button @click="test">{{msg}}</button></div>`,
// 绑定触发事件
methods: {
test () {
// 触发事件,以及自定义方法
this.$emit(
'get-data',
this.msg)
// 这里的this指的是当前子组件
}
},
data () {
return {
msg:
'ces wom saf'
}
}
}
},
methods: {
getData (msg) {
console.log(msg)
this.datas = msg
}
},
data () {
return {
datas:
''
}
}
}
HTML中写法如下:
<child
@get-data="getData"
></child>