深入浅出Vue基本语法:让你快速上手Vue框架(三)

简介: 深入浅出Vue基本语法:让你快速上手Vue框架(三)
  • 单向数据流概念

所有的 prop 都使其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件 中,但是反过来则不行(子组件不能直接修改父组件传过来的值)。这样会防止从子组件意外变更父级 组件的状态,从而导致你的应用的数据流向难以理解。

每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一 个子组件内部改变 prop。如果你这样做了, Vue 会在浏览器的控制台中发出警告。

例 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个 计算属性:

父组件

<template>
<div>
    <!-- 我是父组件 -->
    <child-page :size="size"></child-page>
    </div>
</template>
<script>
    import ChildPage from './child-page';
    export default {
        components: {
            ChildPage
        },
        data() {
            return {
                size: 'M'
            };
        }
    };
</script>

子组件

<template>
<div>
    <!-- 插值表达式使用normalizedSize属性渲染 -->
    <div>{{ normalizedSize }}</div>
    </div>
</template>
<script>
    export default {
        //props接收
        props: {
            size: {
                type: String,
                default: null
            }
        },
        //在computed节点中定义方法normalizedSize
        computed: {
            normalizedSize: function() {
                return this.size.toLowerCase(); //转换成小写
            }
        }
    };
</script>

2、父组件通过ref调用子组件方法传值 this.$refs

例父组件:

<template>
<div>
    <!-- 在子组件上绑定ref -->
    <child-page ref="childRef"></child-page>
    <el-button type="primary" @click="getChildInit()">点击按钮调用子组件方法</elbutton>
    </div>
</template>
<script>
    import ChildPage from './child-page';
    export default {
        components: {
            ChildPage
        },
        data() {
            return {};
        },
        created() {},
        mounted() {},
        methods: {
            //调用子组件initDate方法
            getChildInit() {
                let val = "父组件传递值";
                this.$refs.childRef.initDate(val);
            }
        }
    };
</script>

子组件

<template>
<!-- 我是子组件 -->
  <div></div>
</template>
<script>
    export default {
        data() {
            return {};
        },
        created() {},
        mounted() {},
        methods: {
            //父组件调用
            initDate(val) {
                //val是:父组件传递值
                this.$message({
                    message: '我是子组件的方法',
                    type: 'success'
                });
            }
        }
    };
</script>

2)子组件传值给父组件

这里需要用到 vue 的一个实例方法**e m i t ∗ ∗ , ∗ ∗ emit**,**emitemit**通常用于子组件调用父组件方法,实现子组件主动与 父组件进行通讯传值。

语法:[vm.$emit( eventName, …args)]

参数: {string} eventName 事件名 […args] 参数 触发当前实例上的事件。附加参数都会传给监听器回调。

<template>
<div>
    <!-- 我是子组件 -->
    <button type="default" @click="toParentData">触发事件传值给父组件</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                title: '我是子组件'
            };
        },
        methods: {
            // 子组件调用vm.$emit方法
            // 注意:这里的getData是父组件中绑定的事件名
            toParentData() {
                this.$emit('getData', this.title);
            }
        }
    };
</script>
<template>
<div>
    <!-- 父组件,通过@绑定了一个getChildData事件来监听子组件的触发事件 -->
    <child-page @getData="getChildrenData"></child-page>
    </div>
</template>
<script>
    import ChildPage from './child-page';
    export default {
        components: {
            ChildPage
        },
        data() {
            return {
                title: ''
            };
        },
        methods: {
            // 用自定义事件来接收子组件传的值
            getChildrenData(e) {
                this.title = e;
            }
        }
    };
</script>

3 . 插槽的使用

插槽是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板 代码,如 HTML、组件等,填充的内容会替换子组件的标签。

1)默认插槽:在子组件内使用 slot 标签占位,在slot标签内的内容为默认内容,如果不传值,则显示默 认内容。

例:父组件默认展示子组件的内容,填充内容后替换默认内容

<!-- 我是父组件 -->
<template>
<!-- 展示子组件默认内容 -->
  <child-page></child-page>
<!-- 展示父组件填充内容 -->
  <child-page>我替换了myslot</child-page>
</template>
<!-- 我是子组件 -->
<template>
  <div>
      <slot>默认显示我</slot>
    </div>
</template>

2)具名插槽:一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据 这个名字把内容填充到对应插槽中。

  1. 在子组件的slot标签上设置name属性
  2. 父组件的template上结合 v-slot:子组件的name值 ,来指定对应的插槽 例:一个上中下布局,父组件填充到对应位置
<!-- 具名插槽子组件 -->
<template>
<div class="container">
    <header>
        <!-- 我们希望把页头放这里 -->
        <slot name="header"></slot>
    </header>
    <main>
        <!-- 我们希望把主要内容放这里 -->
        <slot></slot>
    </main>
    <footer>
        <!-- 我们希望把页脚放这里 -->
        <slot name="footer"></slot>
    </footer>
    </div>
</template>
<!-- 我是父组件 -->
<template>
<child-page>
    <!-- v-slot:子组件的name值,指定对应的插槽 -->
    <template v-slot:header>
</template>
<p>主要内容</p>
<template v-slot:footer>
<p>页脚</p>
</template>
</child-page>
</template>

3)作用域插槽:子组件往插槽上绑定数据,父组件使用时可接收

  1. 在子组件slot标签使用v-bind绑定数据
  2. 使用组件时父组件在 template 标签上使用 v-slot=“变量名” 来接收子组件传递过来的数据 例:一个列表组件,在父组件触发点击按钮并获取参数
<!-- 列表子组件 -->
<template>
<div>
    <ul>
        <li v-for="(item,index) in list" :key="item.id">
            <!-- v-bind绑定数据 -->
            <slot :item='item'></slot>
    </li>
    </ul>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                list:[
                    {
                        name:'作用域插槽1',
                        id:1
                    },
                    {
                        name:'作用域插槽2',
                        id:2
                    },
                    {
                        name:'作用域插槽3',
                        id:3
                    }
                ]
            }
        }
    }
</script>
<!-- 我是父组件 -->
<template>
<div>
    <child-page>
        <!-- v-slot="变量名" 来接收子组件传递过来的数据 -->
        <template v-slot="slotProps">
            <el-button type="primary" @click="slotFn(slotProps.item)">父组件按钮
                {{slotProps.item.id}}</el-button>
</template>
</child-page>
</div>
</template>
<script>
    import ChildPage from './child-page';
    export default {
        components: {
            ChildPage
        },
        data() {
            return {};
        },
        methods: {
            slotFn(row){
                this.$message({
                    message: row,
                    type: 'success'
                });
            }
        }
    };
</script>

() {

return {

list:[

{

name:‘作用域插槽1’,

id:1

},

{

name:‘作用域插槽2’,

id:2

},

{

name:‘作用域插槽3’,

id:3

}

]

}

}

}

```vue
<!-- 我是父组件 -->
<template>
<div>
    <child-page>
        <!-- v-slot="变量名" 来接收子组件传递过来的数据 -->
        <template v-slot="slotProps">
            <el-button type="primary" @click="slotFn(slotProps.item)">父组件按钮
                {{slotProps.item.id}}</el-button>
</template>
</child-page>
</div>
</template>
<script>
    import ChildPage from './child-page';
    export default {
        components: {
            ChildPage
        },
        data() {
            return {};
        },
        methods: {
            slotFn(row){
                this.$message({
                    message: row,
                    type: 'success'
                });
            }
        }
    };
</script>


目录
打赏
0
0
0
0
4
分享
相关文章
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
159 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
76 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
88 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
83 1
Vue框架快速入门
Vue是现在最流行的前端框架之一,而且相对于其他两个框架React和Angular来说也更加易学,而且它的作者是国人,中文文档也很完善。当然Vue框架算是比较高级的框架,所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。
1359 0
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
113 58
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等