Vue :六种方法实现,父子通信,直接上六合一示例 ,面试可看!!!

注释相当完整,可直接复制到html里文件,观察如何实现哦


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        
        <prop-slotname :parent="parent" text="this is a text">
            default
            <template v-slot:header="slotProps">
                
                <div>
                    header
                    {{ slotProps.child.value }}
                    
                div>
            template>
            <template #footer="slotfooter">
                <div>
                    footer
                    {{ slotfooter.child.value }}
                div>
            template>
        prop-slotname>
        
        <event-slot>
        event-slot>
        
        <func @fatherfunc="parentFunc">
            
        func>
        
        <attrs-listeners url="123" gg="125" @fatherfunc="parentFunc" :parent="parent">
        attrs-listeners>
        
        <provide-inject>
        provide-inject>
        
        <children-parent>
        children-parent>
    div>
    <script type="module">
        /**
         * 
         * 方法1 props-slotName ------------ 父向子互传数据  子向父 一般 麻烦
         * 方法2 bus event --------- 父子互相 挺好 但是要考虑执行顺序
         * 方法3 $emit ------------ 一般,只能接受父亲的方法
         * 方法4 $attrs $listener ------------ 挺好使,不过不能往父亲传值
         * 方法5 provide-inject ------------ 感觉作用比较小
         * 方法6 $parent $children ----------- 挺好 就是获取子麻烦
        */
        import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js';
        var Event = new Vue(); //方法2的公交车
       /**
        * 
        * 方法六
        * 
       */
        Vue.component('children-parent',{
            mounted(){
                console.log("this.$parent", this.$parent) //直接获取父vue节点
            },
            template: `
                
children-parent
`
}) //方法六 children parent 父子互传 较好 /** * * 方法五 * */ Vue.component('provide-inject',{ inject:['test'], mounted(){ console.log('test: ', this.test); //父亲provide给的值 }, template: `
provide-inject
`
}) //方法5 provide-inject 父传子数据 一般 /** * * 方法四 * */ Vue.component('attrs-listeners',{ mounted(){ console.log('this.$attrs: ', this.$attrs); //接受组件头的所有数据 console.log('this.$listener: ', this.$listeners); //接受组件头的所有方法 }, template: `
attrs-listeners
`
}) //父亲给儿子传方法与数据 比较好 方法4 attrs-lisnters 父传子方法与数据 还行 /** * * 方法三 * */ Vue.component('func',{ methods: { toFather: function(){ Event.$emit('tofather','func传值给event-slot') //兄弟传送方法 } }, mounted(){ this.$emit("fatherfunc","儿子的传值 func") //父亲 传方法 }, template: `
`
}) //父亲给儿子传方法 方法命必须为小写 方法3 func传值 父传子方法 一般 /** * * 方法二 * */ Vue.component('event-slot', { mounted(){ Event.$on('tofather',this.toFather) //给busEvent 上方法 }, template:`
eventSlot
`
}) //方法2 事件中心 按顺序mounted执行 理论上可任意传数据方法 挺好 /** * * 方法一 * */ Vue.component('prop-slotname', { props: ['parent'], //父向子传递数据 //方法1 data() { return { child: { value:"I am child" } } }, template: `
{{ child.value }} {{ parent.value }}

`
}) //方法1 父子互传数据 还行 /** * * 父亲节点 * */ var vm = new Vue({ el: '#app', data: { parent: { value: 'I am father' } }, provide(){ return{ test:'parentProvide' //方法5 } }, mounted() { // console.log("father", childrenFunc) console.log('this.$children', this.$children); //方法六 Event.$emit('tofather','father传值给event-slot') //方法2 }, methods: { parentFunc(son) { console.log("这是父亲方法,儿子传值:",son) } }, })
script> body> html>

你可能感兴趣的:(vue父子通信,六种,通信,vue,javascript,vue.js,html)