부모 및 자식 데이터 전송
9203 단어 vue
<template>
<div style="border: #00b7ee solid 4px;padding: 20px">
<h1>This is the tcl test page.</h1>
<h1>{{this.people}}</h1>
<ckt :property_test="this.people"></ckt>
<button @click="demo_method">list.vue组件中的按钮</button>
</div>
</template>
<script>
import Ckt from '@/views/modules/aaadir/form'
export default {
name: 'list',
components: {
Ckt
},
data () {
return {
people: {
name: 'tcl',
age: 40,
property: 'company'
}
}
},
methods: {
demo_method () {
// 子组件中的值,由父组件通过property方式传递给子组件,父组件中源数据变化,子组件中的值也会跟着变动
this.people.age = ++this.people.age
}
}
}
</script>
<style scoped>
</style>
form.vue
<template>
<div style="border: #00b7ee solid 4px; margin: 10px">
<br><br>
<h1 style="color: #00b3a4">这是form.vue中的第一行</h1>
<button @click="demo_method">这是form.vue中的按钮</button>
<h1 style="color: #00b3a4">这是form.vue中的第二行</h1>
<h1>{{this.property_test}}</h1>
<h1>名字为:{{this.property_test.name}}</h1>
<h1>年龄:{{this.property_test.age}}</h1>
<h1>类型:{{this.property_test.property}}</h1>
</div>
</template>
<script>
export default {
name: 'Ckt',
// 在子组件定义部分,需要把父组件传递过来的 property_test属性,先在props数组中定义一下(代表这个属性是由父组件传递过来的),这样,才能使用这个数据
props: ['property_test'],
watch: {
property_test: function (newVal, oldVal) {
console.log(`newVal为:${newVal}`)
console.log(`oldVal为:${oldVal}`)
}
},
methods: {
demo_method () {
console.log('test one.')
// 下面两种方式可以修改父组件中的值,但是这种随意的修改父组件中的值,会让代码变得难以维护,建议采用显示的 $emit方式。
// 详情参考:https://jithilmt.medium.com/vue-js-2-two-way-data-binding-in-parent-and-child-components-1cd271c501ba
// 和下面的方式一样,子组件中值得变化,父组件中变量也会跟着变动。
// this.property_test.age = this.property_test.age + 1
// 和上面的方式一样,子组件中值的变化,父组件中变量值也跟着变动。
this.$set(this.property_test, 'age', ++this.property_test.age)
}
}
}
</script>
<style scoped>
</style>
Reference
이 문제에 관하여(부모 및 자식 데이터 전송), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/chuangwang/parent-child-data-transfer-3e0i텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)