Vue脚手架开发入门

news/2024/10/18 7:51:00/

Vue脚手架开发入门

安装脚手架及初始化项目

略过

后续使用的项目就是新搭建的一个项目

组件间的通信

父传子

查看《Vue初始化项目加载逻辑》这篇文章即可
父组件
在这里插入图片描述
子组件
在这里插入图片描述

子传父

场景：例如你的购物车，里面有很多商品，每个商品是一个小组件，每个组件都有价钱这个元素，每个组件之间是不清楚其他小组件的价钱的，我现在要算总价，购物车总价是在购物车这个大组件里的，那我现在要把每个小组件的价钱这个值传给购物车这个大组件中来

我们举例子就用新建项目的HelloWorld即可，将一些其他乱七八糟的删除掉

子组件的操作

<template><div class="hello"><!--点击按钮，触发方法，方法里有自定义事件--><button @click="handler">按钮</button></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data(){return{childCount:0 //没有特殊含义，只是用来标识这个值来自于子类，见名知意，后续将这个值传给父组件}},methods:{handler(){this.childCount++this.$emit('child-count-change',this.childCount)  //子传父，需要通过自定义事件来处理,这里就是自定义事件设置，通过this.$emit()来触发自定义事件//第一个参数，我们先随便编造一个事件，就叫child-count-change//第二个参数，就是事件要传入的数据//总结一下，就是只要一触发child-count-change事件，就会将this.childCount传入进去//那这个时间由谁来做一个响应的处理呢，就需要去父组件里进行一个监听}}
}
</script><style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

父组件的操作

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"@child-count-change="handlerFather" ></HelloWorld><!--1、这里的@child-count-change，就是我们在子组件里的自定义实践，绑定到了handlerFather这个方法上，在methods里实现--><p>父组件中接受的插值是: {{childData}}</p><!--3、用来展示从子组件传递过来的值，只是方便观察--></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',data(){return{childData: 0  //2、定义一个响应式数据，之后用来承接子组件传过来的值}},components: {HelloWorld},methods:{//4、还记得我们在子组件里将childCount这个值传进来了handlerFather(childCount){this.childData=childCount  //5、将子组件传进来的值复制给父组件的响应式数据，按常理这里一定是更复杂的操作，例如求和等等，这样写只是为了方便而已}}
}
</script>

结果展示

按钮是子组件的，文案是父组件的
在这里插入图片描述

组件插槽

比如说现在helloworld组件里只有一个按钮了，是它的核心功能，但是比如说我们想要每次在使用这个组件的时候，有不一样的呈现的话

默认插槽

子组件原来的样子

<template><div class="hello"><button @click="handler">按钮</button></div>
</template>

父组件的内容

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"@child-count-change="handlerFather" ></HelloWorld><p>{{childData}}</p><!--1、多写几个helloworld组件，想要展示有所不同，像下面再双标签中间写的内容就是给插槽的内容，可以在子组件中规定你给插槽的内容在哪里去展示--><HelloWorld>这是默认内容1</HelloWorld><HelloWorld>这是默认内容2</HelloWorld><HelloWorld>这是默认内容3</HelloWorld>    <HelloWorld></HelloWorld>    </div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',data(){return{childData: 0  }},components: {HelloWorld},methods:{handlerFather(childCount){this.childData=childCount  }}
}
</script>

现在页面成这个样子了
在这里插入图片描述

接下来在子组件中定义插槽的内容

<template><div class="hello"><!--1、比如我想要将父组件传进来的值放在前面，这个slot并不是一个真正的标签，如果父组件给值了，那就展示父组件的值，没给值，那就展示我们给的默认的--><slot>基础的默认内容</slot><button @click="handler">按钮</button></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data(){return{childCount:0 }},methods:{handler(){this.childCount++this.$emit('child-count-change',this.childCount)  }}
}
</script><style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

在这里插入图片描述
比props的方式更简单，还可以将“这是默认内容”写成html

插槽的意义

除了比prop更方便之外，还意味着子组件的一部分区域是开放给父组件的，而不是全部由子组件定义，更灵活

具名插槽

默认插槽有一个问题，那就是就这一个，如果有多个插槽呢，我们怎么区别从父组件传来的值，是展示在子组件的哪个插槽呢，这就需要具名插槽

子组件的变化

<template><div class="hello"><slot>基础的默认内容</slot><button @click="handler">按钮</button><!--新建一个插槽，但是插槽带了一个name属性，并且给一个默认值是：footer的默认内容--><slot name="footer">footer的默认内容</slot></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data(){return{childCount:0 }},methods:{handler(){this.childCount++this.$emit('child-count-change',this.childCount)  }}
}
</script><style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

父组件的变化

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"@child-count-change="handlerFather" ></HelloWorld><p>{{childData}}</p><HelloWorld>这是默认内容1</HelloWorld><HelloWorld>这是默认内容2</HelloWorld><HelloWorld>这是默认内容3</HelloWorld>    <HelloWorld></HelloWorld>    <!--新建一个子组件，通过template标签，里面的v-slot:footer(或者#footer也可以)来将标签里的内容绑定给子组件名为footer的插槽，而不是其他插槽--><HelloWorld><template v-slot:footer>这是专门给子组件footer插槽的内容</template></HelloWorld><!--或者，将v-slot:替换成#--><HelloWorld><template #footer>这是专门给子组件footer插槽的内容2</template></HelloWorld></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',data(){return{childData: 0  }},components: {HelloWorld},methods:{handlerFather(childCount){this.childData=childCount  }}
}
</script>

在这里插入图片描述

在父组件中通过插槽使用子组件的数据

<template><div class="hello"><slot>基础的默认内容</slot><button @click="handler">按钮</button><slot name="footer" >footer的默认内容</slot></div>
</template>

就以上面这个子组件的插槽来说，这个插槽是属于子组件的而不是父组件的，如果父组件要使用子组件的数据的话，就需要使用作用域插槽方式来做一个设置

子组件

<template><div class="hello"><slot>基础的默认内容</slot><button @click="handler">按钮</button><!--现在我们在子组件的插槽中，绑定了一个响应式数据--><slot name="footer" :childCount="childCount">footer的默认内容</slot></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data(){return{childCount:0 }},methods:{handler(){this.childCount++this.$emit('child-count-change',this.childCount)  }}
}
</script><style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

父组件

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"@child-count-change="handlerFather" ></HelloWorld><p>{{childData}}</p><!-- 我们通过 #footer="dataObj"的方式，获取了从子组件传进来的值，并重命名为dataObj，这个值，定义了就一定要使用，要不然会报错的--><!-- 虽然子组件传进来的看起来是一个值，其实是一个对象 --><HelloWorld><template #footer="dataObj">这是专门给子组件footer插槽的内容{{dataObj }}</template></HelloWorld></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',data(){return{childData: 0  }},components: {HelloWorld},methods:{handlerFather(childCount){this.childData=childCount  }}
}
</script>

在这里插入图片描述
你看，传进来的是
{ “childCount”: 0 }
而不是一个值
0
如果只想用某一个值的话

父组件

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"@child-count-change="handlerFather" ></HelloWorld><p>{{childData}}</p><!-- 我们通过 dataObj.字段名的方式来获取某一个值--><HelloWorld><template #footer="dataObj">这是专门给子组件footer插槽的内容{{dataObj.childCount }}</template></HelloWorld><!-- 或者，直接在绑定的时候就绑定其中的某一个字段 --><HelloWorld><template #footer="{childCount}">这是专门给子组件footer插槽的内容二{{childCount }}</template></HelloWorld>  </div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',data(){return{childData: 0  }},components: {HelloWorld},methods:{handlerFather(childCount){this.childData=childCount  }}
}
</script>

在这里插入图片描述


http://www.ppmy.cn/news/735020.html

相关文章

给LLM装上知识：从LangChain+LLM的本地知识库问答到LLM与知识图谱的结合

给LLM装上知识：从LangChain+LLM的本地知识库问答到LLM与知识图谱的结合

第一部分 基于LangChain ChatGLM-6B的本地知识库问答的应用实现 1.1 什么是LangChain&#xff1a;连接本地知识库与LLM的桥梁 作为一个 LLM 应用框架&#xff0c;LangChain 支持调用多种不同模型&#xff0c;提供相对统一、便捷的操作接口&#xff0c;让模型即插即用&#x…
阅读更多...
世界女性科技群落（一）：一面喑哑、一面高亢的非洲鼓

世界女性科技群落（一）：一面喑哑、一面高亢的非洲鼓

今天&#xff0c;数字技术已经不再是一种奢侈品&#xff0c;而是一种必需品&#xff0c;是全球每一个人密不可分的生活方式。 而使用数字技术、投身数字产业发展的差异&#xff0c;并不仅仅存在于男性与女性之间&#xff0c;还存在于不同国家、地域、阶层的女性之间。 比如说&a…
阅读更多...
入行AI，你需要一本Python机器学习入门

入行AI，你需要一本Python机器学习入门

点击此处添加图片说明文字 ​ 目前机器学习红遍全球。男女老少都在学机器学习模型&#xff0c;分类器&#xff0c;神经网络和吴恩达。你也想成为一份子&#xff0c;但你该如何开始&#xff1f; 今天小编推荐这本《Python机器学习》教你快速入门。 点击此处添加图片说明文字 ​ …
阅读更多...
[译]迈向下一代人工智能：催化神经人工智能革命

[译]迈向下一代人工智能：催化神经人工智能革命

转自https://zhuanlan.zhihu.com/p/575850167 - 知乎 - felonwan的文章。 文章目录 摘要背景&#xff08;此标题为译者加&#xff09;神经人工智能大挑战&#xff1a;具身图灵测试与世界互动动物行为的灵活性能量效率 解决具身图灵测试的路线图我们需要什么结论参考文献术语翻译…
阅读更多...
施米德胡贝，被遗忘的人工智能教父

施米德胡贝，被遗忘的人工智能教父

▼ 点击上方蓝字 关注网易智能 为你解读AI领域大公司大事件&#xff0c;新观点新应用 选自 | Bloomberg 编译 | 网易智能&#xff08;smartman163&#xff09; 期号 | 《AI英雄》总第75期 在科技行业中&#xff0c;许多大名鼎鼎的人物都在开发通用人工智能&#xff08;AGI&…
阅读更多...
学生护眼台灯几瓦最好？2022精选光源稳定的学生护眼台灯

学生护眼台灯几瓦最好？2022精选光源稳定的学生护眼台灯

学生使用的台灯一定要以护眼的为主&#xff0c;家长们就会问护眼台灯的功率多少比较合适&#xff0c;功率代表着亮度以及柔和度是否达到规定的指标&#xff0c;护眼灯的功能不能过大&#xff0c;否则对视力的损害是无法修复的&#xff0c;有些企业为了利于会将功率做到20w以上&…
阅读更多...
计算机器和智能-阿兰图灵(转帖)

计算机器和智能-阿兰图灵(转帖)

转自：http://duanple.blog.163.com/blog/static/7097176720111019571206/ 英文版本可以在这里找到：http://www.loebner.net/Prizef/TuringArticle.html 【原题】COMPUTING MACHINERY AND INTELLIGENCE 【译题】计算机器和智能 【作者】阿兰图灵 1. 模仿游戏（The Imitati…
阅读更多...
计算机原理与智能－翻译

计算机原理与智能－翻译

英文原文&#xff1a;链接: https://pan.baidu.com/s/14WORaltIGb0U4-8_Baae7g 密码: 8ep0 计算机原理与智能 阿兰 图灵 我建议考虑这个问题&#xff0c;“机器能思考吗&#xff1f;”这应该从定义“机器”和“思考”这两个词的含义开始。这些定义可能是为了尽可能反映这些…
阅读更多...
最新文章

Copyright @ 2022~2023