Day10-元件沟通传递(part2)

没有props还可以传资料吗

v-bind和v-on在没有props的情况下一样可以得到父层的资料。

<div id="app">
   <my-component :class="className" @click="greeting"></my-component>
</div>
<!--渲染後<div class="card block">Vue</div>--->

const app = Vue.createApp({
    data() {
        return {
            className: 'block'
        }
    },
		methods: {
        greeting() {
            alert('Hi')
        }
    }
});
app.component('my-component', {
    template: `
    <div class="card"></div>
    `,
})
app.mount('#app');

补充:

v-bind="$sttrs"

在多个节点的情况下，Vue找不到DOM就会出现错误，加上v-bind="$sttrs"可以告诉他DOM在哪

app.component('my-component', {
    template: `
        <header>...</header>
        <body v-bind="$sttrs">...</body>
        <footer>...</footer>
    `
})

inheritAttrs: false

不想要子元素继承资料可以加这个。

app.component('my-component', {
		inheritAttrs: false,
    template: `.....`
})

递回元件Recursive Component

子元件中包子元件，常看到的样子就是像树状图那样的结构，如: 侧选单含有次选单。

递回一定要有name属性，不然元件就不能呼叫，呼叫时最好也有:key做为唯一的标签。

Untitled

<div id="app">
        <menu-component :title="menuData.name" :child="menuData.childNodes"></menu-component>
    </div>

const menuData = {
    name: 'uniqlo',
    childNodes: [{
        name: 'women',
        url: null,
        childNodes: [{
            name: 'top',
            url: 'https://www.uniqlo.com/tw/special/outerlineup/women/'
        },
        {
            name: 'inner',
            url: 'https://www.uniqlo.com/tw/store/feature/women/inner/wireless-bra/'
        }]
    },
    {
        name: 'men',
        url: null,
        childNodes: [{
            name: 'top',
            url: 'https://www.uniqlo.com/tw/special/topscollection/men/'
        }, {
            name: 'bottom',
            url: 'https://www.uniqlo.com/tw/special/bottomscollection/men/'
        },
        {
            name: 'shirts',
            url: 'https://www.uniqlo.com/tw/store/feature/men/tops/dress-shirts-long-and-short/'
        }]
    }, {
        name: 'child',
        url: null,
    }
    ]
}
const app = Vue.createApp({
    data() {
        return {
            menuData
        }
    }
});
app.component('menu-component', {
    name: `menu-component`,
    props: {
        title: String,
        url: String,
        child: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            isOpen: false
        }
    },
    template: `
    <ul>
    <li>
        <template v-if="child.length > 0">
            <h2 class="has-child" :class="{'isOpen':isOpen}" @click="isOpen=!isOpen">{{title}}</h2>
            <menu-component v-show="isOpen" v-for="c in child" :title=c.name :child="c.childNodes" :url="c.url">
            </menu-component>
        </template>
        <a :href="url" v-else>{{title}}</a>
    </li>
</ul>
    `
})
app.mount('#app');

自定义事件

父子元件之间的沟通方式有个流传已久的口诀：「Props in, Event out」。—重新认识 Vue.js

当子元件要将处理过的资料送回外层父元件时，可以透过this.$emit触发@update="updateInfo"来更新外层资料，用下图可以清楚的知道资料的流动。

Untitled

deep
watch里面的参数。我们都知道对象 {} 都指向一个内存地址。当其属性改变的时候,对象的内存地址没发生改变。故当watch监听一个对象的时候,对象属性发生改变,watch监听不到。为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。——Vue.js中的methods，computed，watch。

v-model元件双向绑定

讲到v-model双向绑定元件前要先回顾一下之前的表单绑定，先前在绑定input时会使用v-bind，可以将其拆解为下

<input v-model="msg">
<!-- 拆解 -->
<input v-bind:value="msg" v-on:input="msg=$event.target.value">

使用在元件双向绑定也是类似的概念，component 接收一个 modelValue 的值，然後透过触发 update:modelValue 事件来更新值。

<my-component v-model="msg"></my-component>

const app = Vue.createApp({
    data() {
        return {
            msg: 'Hello Vue!!'
        }
    }
});
app.component('my-component', {
    props: ['modelValue'],
    template: `
    <input type="text" :modelValue="modelValue" @input="$emit('update:modelValue',$event.target.value)">
    `
})

自定义事件上使用v-model，属性及事件的名称改为

prop：value ⇒ modelValue
event：input ⇒ update:modelValue

跨层级传递

上下跨层

当父层元件要传递给最底部的元件时，可以透过provide和inject机制。

provide : 定义要传递出去的资料(输出)
inject : 取得顶层元件资料 (取回)

Untitled

<input type="text" v-model="msg">
<list-component></list-component>

const app = Vue.createApp({
    data() {
        return {
            msg: 'Hello Vue!!'
        }
    },
    provide() {
        return {
            provideMsg: this.msg,
            provideMsg2: Vue.computed(() => this.msg)
        }
    }
});

若要子层inject取回的资料与上层连动，需透过Vue.computed()包装，包装後的物件要加.value才可以运作。

app.component('list-component', {
    template: `
    <ul>
        <li v-for="i in 3">
            {{i}}
            <list-item></list-item>
        </li>
    </ul>
    `,
    components: {
        'list-item': {
            inject: ['provideMsg', 'provideMsg2'],
            template: `
            <div>{{provideMsg}}</div>
            <div>{{provideMsg2.value}}</div>`
        }
    }
})