vue组件之间的传值方式,父组件传值到子组件,子组件传值到父组件, 非父子组件传值 - 前端笔记-1.vue 组件之间的传值, 父组件传值到子组件 1.父组件 传值到子组件 , 父组件要 在父组件的元素能添加 一个 自定义的属性 并且自定义属性 加上 v-...

学习笔记

点滴记忆
回忆过往
首页>> >>vue组件之间的传值方式,父组件传值到子组件,子组件传值到父组件, 非父子组件传值 - 前端笔记

1.vue 组件之间的传值, 父组件传值到子组件
    1.父组件 传值到子组件 ,   父组件要 在父组件的元素能添加 一个 自定义的属性  并且自定义属性  加上 v-bind  进行绑定
    2. 子组件 接收 父组件的传值 , 子组件 通过 props 接收 父组件的值(通过数组的方式接收) 

<body>
    <!-- //引入vue.js文件 -->
    <script type='text/javascript' src='js/vue.js'></script>
    <!-- //html元素代码 -->
    <div id='app'>
        {{msg}}
        <hr>
        <!-- //把要传的值 通过自定义属性 v-bind绑定属性 -->
        <con :i="m"></con>
    </div>

    <!-- //vue代码 -->
    <script type='text/javascript'>
        //局部子组件
        var con = {
                // 子组件 通过 props 接收父组件的传值
                props: ['i'],
                data() {
                    return {
                        con: '子组件'
                    }
                },
                template: `<div>{{con}}{{i}}</div>`,
            }
            //vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件',
                m: '-----父' //传值给子组件的代码
            },
            components: { //添加局部子组件
                con // con是简写 = con:con = con:{} 只是把对象放在外面写了
            }
        });
    </script>
</body>

2.子组件 , 子组件 传值,到父组件
    1.子组件 , 子组件通过点击事件  的函数为 $meit(‘父组件的函数’,‘’传入的值)
    2.父组件 , 父组件 通过 @名称(名称是子组件传过来的的函数名称) = ‘函数’  , 通过这种方式接收值 , 

<body>
    <!-- // 引入vue.js文件 -->
    <script type='text/javascript' src='js/vue.js'></script>
    <!-- //html元素 -->
    <div id='app'>
        {{msg}}
        <hr>
        <son @add="sha"></son>
    </div>
    <!-- //vue代码 -->
    <script type='text/javascript'>
        //子组件
        var son = {
                //template代表模板文件 
                template: `<div>{{msg}} 
                    <button @click="show">传值给父亲</button>
                </div>`,
                //代表组的数据
                data() {
                    return {
                        msg: '子组件'//页面显示的数据
                        m: '子' //传给 父亲的数据
                    }
                },
                methods: {
                    show() { //传值的函数 通过 返回 $emit方法 使用
                        return this.$emit('add'this.m);
                    }
                }
            }
            //vue实例(简称:父组件)
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件'
            },
            components: {
                son
            },
            methods: {
                sha(con) {
                    console.log(con);
                }
            },
        });
    </script>
</body>

3.非父子组件传值,要通过一个 中间事件  点击事件 加 $emit()   传值
    1.先设置一个  中间事件     列: var bus = new Vue();
    2.传值组件,通过中间事件的 $emit() 传值   
    3.接值组件,通过mounted(){} 钩子函数,中间事件的 $on() 监听
<body>
    <!-- //引入vue.js -->
    <script type='text/javascript' src='js/vue.js'></script>
    <!-- //html结构 -->
    <div id='app'>
        {{msg}}
        <son></son>
        <con></con>
    </div>
    <!-- //vue代码 -->
    <script type='text/javascript'>
        var v = new Vue(); // 事件中心
        var son = {
            template: `<div>{{son}}</div>`// 模板
            data() { //放变量的
                return {
                    son: '我是son'
                }
            },
            mounted() { // 所有事件加载完,执行的钩子函数 
                v.$on('cons'this.callback);
            },
            methods: { //放函数的
                callback(con) {
                    console.log(con);
                }
            }
        }
        var con = {
            template: `<div>{{con}} 
                <button @click="show">传值给son</button>
                </div>`,
            //通过给button加上点击事件,使用事件中心的 $emit 函数传值给兄弟
            data() {
                return {
                    con: '我是con'
                }
            },
            methods: { //放函数的
                show() {
                    v.$emit('cons'this.con)
                }
            },
        }
        var vm = new Vue({ //vue实例
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            components: { //创建组件的
                son,
                con
            }
        });
    </script>
</body>

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » vue组件之间的传值方式,父组件传值到子组件,子组件传值到父组件, 非父子组件传值
版权所有:《前端笔记
文章标题:《vue组件之间的传值方式,父组件传值到子组件,子组件传值到父组件, 非父子组件传值
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-35.html

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)