代码在文末,均可直接复制使用
この記事では主に値の転送や親子コンポーネントの呼び出しなどについて説明します。
記事ディレクトリ
問題 1: 子コンポーネントは親コンポーネントから渡された値を受け取ることができません
親コンポーネントの値がonMounted 中に割り当てられた場合、またはインターフェイスなどの非同期的に割り当てられた場合、子コンポーネントは変更された値を直接取得できません。サブコンポーネントは監視監視を使用する必要があります。
サブコンポーネントson.vueの監視ビューを検索します。
質問 2: 子コンポーネントによって受け入れられる値を変更した後、親コンポーネントの値も変更されていることがわかりました。
変更したくない場合は、サブコンポーネントが受け入れたときにディープ コピーの割り当てを実行する必要があります。親コンポーネントの値を変更したい場合は、別途親イベントに変更を渡すため、ディープコピーの使用を推奨します。
問題 3: サブコンポーネントは値を受け入れますが、変更後にページが更新されません。
サブコンポーネントが単純なデータ型を受け入れる場合、それを ref 受け入れに変更し、応答データを生成します
。詳細については、 let num1VALUE = ref(props.num1) // 応答データを生成します。それ以外の場合、データが変更されてもページは変更されません。
問題 4: 子が親イベントを渡し、親コンポーネントが値を受け入れ、割り当てが無効です
これは、親コンポーネントの変数が reactive を使用して宣言されているためです。reactive 変数 data=! に値を直接代入しないでください。!!応答性が失われます。ref を使用する場合は、値を割り当てる必要がないか、単一の属性を使用して値を 1 つずつ割り当てる必要があります。Obj.attribute = 属性値、または元のオブジェクトの周囲にオブジェクトの追加レイヤーをラップする必要があります。
由此可见:声明尽量用ref。。。。
5、子传父
検索
update:obj
ビュー。
6. 親が子に電話する
検索
sonRef.value.childMethod()
ビュー
7. コード
親コンポーネント far.vue
<template>
<div>
<div>父:{
{
state.str1 }}--{
{
state.data1 }}--{
{
obj1 }} -- {
{
num1 }}</div>
<button style="border: 1px solid cyan;" @click="callChildMethod">父调子事件</button>
<hr>
<son ref="sonRef" :str1="state.str1" :data1="state.data1" :obj1="obj1" :num1="num1" @update:obj="getObj" />
</div>
</template>
<script>
import {
defineComponent, onMounted, reactive ,toRefs,ref} from 'vue'
import Son from './son.vue'
export default defineComponent({
components: {
Son
},
setup() {
const state = reactive({
str1: '',
data1: {
}
})
let obj1 = reactive({
a:1,
})
let num1 = ref(1)
// 父接受子
function getObj(val){
obj1.a = val.a // reactive 不要直接data=赋值!!!会丢失响应式的,如果用ref就不会 非要赋值要不就使用 obj.属性 = 属性值 要不就给原对象多包裹一层对象
// obj1 = val
// obj1 = reactive({
...val})
console.log('父接受子',val,obj1);
}
// 父调用子事件
const sonRef = ref(null)
function callChildMethod() {
sonRef.value.childMethod()
}
onMounted(() => {
// 对于在onMounted或异步的数据 传递给子组件 子组件应该使用watch监听接受 否则拿不到数据
setTimeout(() => {
state.str1 = '二次赋值!'
state.data1 = {
name: 'Alice',
age: 25
}
}, 1000);
})
return {
state,
obj1,
num1,
sonRef,
getObj,
callChildMethod
}
}
})
</script>
サブコンポーネントson.vue
<template>
<div>
<div>子:{
{
state.str1VALUE }}--{
{
state.data1VALUE }}--{
{
obj1VALUE }} -- {
{
num1VALUE }}</div>
<button style="border: 1px solid cyan;" @click="setVal">按钮该值</button>
<button style="border: 1px solid cyan;" @click="setFarVal">子传父</button>
</div>
</template>
<script>
import {
defineComponent, reactive, watch,toRefs,toRef,ref } from 'vue'
export default defineComponent({
props: {
str1: String,
data1: Object,
obj1: Object,
num1: Number,
},
emits: ['update:obj'],
setup(props, {
emit }) {
const state = reactive({
str1VALUE: '',
data1VALUE: {
}
})
let obj1VALUE = JSON.parse(JSON.stringify(props.obj1)) // 复杂数据类型obj如果不用深拷贝赋值 修改对象obj.name单一属性时候(state.data1VALUE.age = 33) 会导致父组件的源值改变 也会导致监听事件再次执行
let num1VALUE = ref(props.num1) // 生成响应式数据 否则修改数据 页面不变化
// 同时监听str1和data1 对于在onMounted或异步的数据 传递给子组件 子组件应该使用watch监听接受 否则拿不到数据
watch([() => props.str1, () => props.data1], ([str1, data1]) => {
console.log('监听',str1,data1);
state.str1VALUE = JSON.parse(JSON.stringify(str1)) // 复杂数据类型obj如果不用深拷贝赋值 修改对象obj.name单一属性时候(state.data1VALUE.age = 33) 会导致父组件的源值改变 也会导致监听事件再次执行
state.data1VALUE = JSON.parse(JSON.stringify(data1))
}, {
deep:true, immediate: true })
// setTimeout(() => {
// state.str1VALUE = 'str1'
// }, 2000);
function setVal(){
state.str1VALUE = '三次修改赋值'
// state.data1VALUE = {
// name: '张三',
// age: 11
// }
state.data1VALUE.age = 33
obj1VALUE.a = 3
num1VALUE.value = 3
}
// 子传父
function setFarVal(){
let obj = {
a: 123456
}
emit('update:obj', obj);
console.log('子传父',obj);
}
function childMethod(){
console.log('子事件');
}
return {
state,
obj1VALUE,
num1VALUE,
setVal,
setFarVal,
childMethod
}
}
})
</script>