Vue_Study入门五

举报
Echo_Wish 发表于 2022/08/10 10:45:50 2022/08/10
【摘要】 Get新知识: vue devtools 的安装及简单使用vue devtools 调试工具,相对于浏览器自带的开发者工具对于调试和查看vue 的项目和demo 提供更强大的调试功能,在对数据绑定的检验,标签结构等方面的查看检验调试更方便。 vue 父子组件传值父子组件之间传值,在子组件中使用props 属性接受传值,在使用时子组件时传入在props 中定义的参数名一致的数值。<!DOCT...

Get新知识:

vue devtools 的安装及简单使用

vue devtools 调试工具,相对于浏览器自带的开发者工具对于调试和查看vue 的项目和demo 提供更强大的调试功能,在对数据绑定的检验,标签结构等方面的查看检验调试更方便。

vue 父子组件传值

父子组件之间传值,在子组件中使用props 属性接受传值,在使用时子组件时传入在props 中定义的参数名一致的数值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_demo03</title>
</head>
<body>
    <div id="app3">
      	/* 使用时需要传入对应props中元素的名称 */
      	/* 这是静态的传入,即参数名传入参数的数值都是固定的 */
        <menu-item title="father"></menu-item>
      	/*这是动态传入,使用属性绑定, 可以动态改变 */
        <menu-item :title="d_title"></menu-item>
    </div>
</body>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<script type="text/javascript">
    /* 组件间数据交互 */
  	/* 子组件中定义,使用props属性,传入一个数组,数组中是接受外部父组件传入数值的形参数值 */
    Vue.component('menu-item', {
        props: ["title", "d_title"],
        data: function(){
            return {
                msg: "子组件内容"
            }
        },
      	/* 在props中定义好之后便可以使用,但当外部为传入参数对应数值时会显示undefined */
        template: '<div>{{msg}}-------{{title}}</div>',
    });
    var temp_vue = new Vue({
        el: "#app3",
        data: {
            fmsg: "父组件内容",
            d_title: "动态内容"
        }
    });
</script>
</html>

vue 父子组件传值 props 属性名规则

在props 中定义接受数据的形参名,可以使用驼峰命名,短横线命名等,但在html的标签中传值的必须使用短横线的方式传值,否则会出现得不到的情况。
而在模板中则可以不区分这些命名方式,即在props 中使用驼峰命名在template 中也可以直接使用驼峰命名的形参名,不会受到影响。
在这里插入图片描述

vue 属性值类型

父子组件传值 使用 props 属性,props 属性支持传输 字符串 String,数值 Number,布尔值 Boolean,数组 Array,对象 Object。在使用组件传值时,需要注意,使用静态的方式传值,默认传递的任何数据都是字符串类型的,而使用
动态的方式传值时 传递的数据类型 则是会自动推断出传递数据的类型,所以一般建议使用动态的方式进行传值。

vue 子组件项父组件传值

props 传递数据原则:单项数据流。
所以根据以上的原则,不建议直接在子组件中操作父组件传递过来的数据。

可以通过子组件自定义事件向父组件传值
在子组件中的template 模板中 使用 e m i t 绑定一个事件形参名,在使用组件时,为事件形参名传递一个 m e t h o d 方法,在 m e t h o d 方法中进行操作父组件数据的操作。原理是因为子组件中触发如按钮的点击事件时会触发一个 emit 绑定一个事件形参名,在使用组件时,为事件形参名传递一个method 方法,在method方法中进行操作父组件数据的操作。原理 是 因为子组件中触发如按钮的点击事件时 会触发一个 emit 的方法执行,并且该方法需要传入一个自定义的事件,一般该自定义事件会绑定一个方法,通过该方法来获取并可以操作父组件的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_demo04</title>

</head>
<body>
    <div id="app4">
        <div :style="{fontSize: fontsize + 'px'}">{{pmsg}}</div>
      	/* 组件中为自定义事件名绑定父组件中的method,通过method 操作父组件的fontsize */
        <son-assembly :parr="parr" @transmit-data="handle"></son-assembly>
    </div>
</body>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<script type="text/javascript">
    /* 组件注册 */
    Vue.component('son-assembly', {
        props: ["parr"],
        data: function(){
            return {
                count: 0
            }
        },
      	/* s使用,在子组件的template 中定义$emit 执行的自定义事件名 */
        template: `<div>
            <ul>
                <li :key="index" v-for="(item, index) in parr">{{item}}</li>
                </ul>
            <button @click='$emit("transmit-data")'>向父组件传递数据以操作父组件</button>
            </div>`,
    });
    var temp_vue = new Vue({
        el: "#app4",
        data: {
            fontsize: 10,
            parr: ["test1", "test2", "test3", "test4"],
            pmsg: "父组件内容"
        },
        methods: {
            handle: function(){
                this.fontsize += 5;
            }
        },
    });
</script>
</html>

vue 子组件向父组件传值 并且携带参数

使用起来 总体与不传参数 基本一致,但需要注意传参的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_demo05</title>

</head>
<body>
    <div id="app5">
        <div :style="{fontSize: fontsize + 'px'}">{{pmsg}}</div>
      	/* 组件中使用,在method 中传入$event 即可将数据传入到method */
        <son-assembly :parr="parr" @transmit-data="handle($event)"></son-assembly>
    </div>
</body>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<script type="text/javascript">
    /* 组件注册 */
    Vue.component('son-assembly', {
        props: ["parr"],
        data: function(){
            return {
                count: 0
            }
        },
      	/* 在子组件的template 中 在$emit() 中不仅传入自定义事件名,还传入参数 */
        template: `<div>
            <ul>
                <li :key="index" v-for="(item, index) in parr">{{item}}</li>
                </ul>
            <button @click='$emit("transmit-data", 5)'>向父组件传递数据以操作父组件</button>
            <button @click='$emit("transmit-data", 10)'>向父组件传递数据以操作父组件2</button>
            </div>`,
    });
    var temp_vue = new Vue({
        el: "#app5",
        data: {
            fontsize: 10,
            parr: ["test1", "test2", "test3", "test4"],
            pmsg: "父组件内容"
        },
      	/* 自定义事件绑定的method 中使用形参名来接受参数 */
        methods: {
            handle: function(event){
                this.fontsize += event;
            }
        },
    });
</script>
</html>

vue 兄弟组件之间的交互

兄弟组件之间的数据交互 通过事件中心其实是一个vue 实例对象,来进行数据交互。示例图如下:

在这里插入图片描述

使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_demo06</title>
</head>
<body>
    <div id="app6">
        <div>父组件</div>
        <div>
            <button @click="handle">销毁事件</button>
        </div>
        <test-tom></test-tom>
        <test-jerry></test-jerry>
    </div>
</body>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<script type="text/javascript">
    /* 兄弟组件间数据交互 */
  	/* 生命一个vue 示例,作为事件中心,来监听兄弟组件之间的事件 */
    var hub = new Vue();
    Vue.component('test-tom', {
        data: function(){
            return {
                num: 0
            }
        },
      	/* 组件的模板中,定义事件绑定函数 */
        template: `
            <div>
                <div>TOM: {{num}}</div>
                <div>
                    <button @click='handle'>点击</button>
                </div>    
            </div>
        `,
      	/* 函数中使用事件中心,触发兄弟组件的绑定事件 */
        methods: {
            handle: function(){
                hub.$emit('jerry-event', 1);
            }
        },
      	/* 操作兄弟组件的数据,实现数据交互 */
        mounted() {
            hub.$on('tom-event', (val) => {
                this.num += val;
            });
        },
    });
    Vue.component('test-jerry', {
        data: function(){
            return {
                num: 0
            }
        },
        template: `
            <div>
                <div>TOM: {{num}}</div>
                <div>
                    <button @click='handle'>点击</button>
                </div>    
            </div>
        `,
        methods: {
            handle: function(){
                /* 触发兄弟组件的事件 */
                hub.$emit('tom-event', 2);
            }
        },
        mounted() {
            hub.$on('jerry-event', (val) => {
                this.num += val;
            });
        },
    });
    var temp_vue = new Vue({
        el: "#app6",
        data: {

        },
      	/* 销毁事件,将指定的事件进行销毁 */
        methods: {
            handle: function(){
                /* 销毁事件 */
                hub.$off("tom-event");
                hub.$off("jerry-event");
            }
        },
    });
</script>
</html>

vue 兄弟之间传值的流程:
在这里插入图片描述

vue 插槽

插槽是用于将父组件的模板内的内容传递到子组件中。

简单使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_demo07</title>
</head>
<body>
    <div id="app7">
        <slot-assembly>test1</slot-assembly>
        <slot-assembly>test2</slot-assembly>
    </div>
</body>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<script type="text/javascript">
    /* 在组件的template中,使用指定的slot 标签名,用于接受父组件的模板内容传递到子组件 */
  	/* slot 可以指定默认值,当如果没有数值传入时,会使用默认值来填充 */
    Vue.component('slot-assembly', {
        template: `
        <div>
            <strong>Error: </strong>
            <slot>default</slot>
        </div>
        `,
    });
    var temp_vue = new Vue({
        el: "#app7",
        data: {

        }
    });
</script>
</html>

具名插槽

**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_demo08</title>
</head>
<body>
  	/* 在使用时,传入slot="" 的name 值,将标签中的模板内容传递对应的插槽中 */
    <div id="app8">
        <base-layout>
            <p slot="header">title1</p>
            <p>title</p>
            <p>title</p>
            <p slot="footer">title3</p>
        </base-layout>

/*如果需要将多个标签的模板内容传入时,借助指定template 标签将多条内容包围使用 */
        <base-layout>
        <template slot="header">
            <p>title</p>
            <p>title</p>
        </template>
        </base-layout>

    </div>
</body>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<script type="text/javascript">
    /* 与普通的使用,区别在于,使用slot 标签时,指定name 值 */
    Vue.component('base-layout', {
        template: `
        <div>
            <header>
                <slot name="header"></slot>
            </header>
            <main>
                <slot></slot>
            </main>
            <footer>
                <slot name="footer"></slot>
            </footer>
        </div>
        
        `,
    });
    var temp_vue = new Vue({
        el: "#app8",
        data: {

        }
    });
</script>
</html>

作用域插槽

作用域插槽就是 父组件 决定显示的样式 即 怎样显示,子组件可以提供内容 决定显示的内容, 即 显示什么。而在之前的普通插槽和具名插槽中 都是父组件既要决定显示内容,又要决定显示样式。作用域插槽 作用就在与 可以根据子组件传递过来的数据 来分别动态决定最终显示的样式。

**
**

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200