正文

vue学习之组件(代码片段)

yaoyao-sun  yaoyao-sun  2023-03-09  297

关键词：

vue官方文档中定义组件通过调用Vue.component方法，一般没使用

定义组件

一个组件为一个vue文件，包含template（必须有），script，style三部分

//com.vue
<template lang="html">
  <div>//只能有一个html标签包裹里面所有节点
　　　child componentname

  </div>
</template>
<script>
    export default

　　　　data()//data部分必须是个函数，返回一个对象。当前组件可以使用data里面的数据
  　　　　return 
           name:‘com‘




</script>
<style lang="css">
</style>

引用组件

比如在App.vue中引用上面的com.vue，三步：import组件，在components里注入，在template使用

<template>
  <div id="app">
     <com></com>
  </div>
</template>

<script>
import com from "./components/com.vue"
export default 
  name: ‘App‘,
  components:
    com  


</script>

什么叫做父子组件

上面例子中，App.vue的components上挂载了component这个组件，其中App.vue是父组件，component是子组件。

父子组件如何通信

在子组件中声明props，接收父组件传过来的数据。

ps：props数据传递是单向的，只能从外到里传递。

<template lang="html">
  <div>
    年龄：age
    名称：name
  </div>
</template>
<script>
    export default
      props:[‘age‘],
      data()
        return
          name:‘com‘
        
      
    
</script>
<style lang="css">
</style>

在父组件中传递age这个数据：（可以传递静态数据或者动态数据）

<template lang="html">
  <div>
    <com age="19"></com>//静态数据
    <com :age="ageNum"></com>//动态数据：变量
  </div>
</template>
<script>
  import com from "./components/com.vue"
  export default
    components: 
      com
    ,
    data()
      return 
        ageNum: 18
      
    
  
</script>
<style lang="css">
</style>

自定义事件

通过自定义事件，可以将子组件的数据发送到父组件。自定义事件使用$emit。比如下面，点击子组件的这个按钮（子组件接收的用户行为），触发父组件自定义的patch事件，执行patch事件的处理函数msg3，改变父组件的ageNum数据

在子组件中代码：

<button type="button" name="button" @click="$emit(‘patch‘,[参数])">发送到父组件</button>

父组件中代码：

<com :age="ageNum" @patch=‘msg3‘></com>//动态数据：变量

export default
    data()
      return 
        ageNum: 18
      
    ,
  methods: 
　　msg3(params)
　　　　　//params:子组件传递过来的参数　
　　　　this.ageNum++

插槽slot

除了前面传递变量改变组件，slot给组件定义了一个插槽，根据组件的使用者，可以在slot处插入其他的内容，使组件具有更大的灵活性,达到动态改变组件的目的。

比如有这么个需求，一个组件中，有body部分，有footer部分，而不同页面引用这个组件，需要用不同的footer，这是时候，这个footer部分，就可以用slot来实现。

如何使用插槽

子组件中

<template lang="html">
  <div>
   <slot name="a"></slot>
　　<button type="button" name="button" @click="$emit(‘patch‘,[参数])">发送到父组件</button>
   <slot name="b"></slot>
  </div>
</template>

父组件中

<template lang="html">
  <div>
    <com age="19">
　　　　<h1 slot="a">加在子组件slot的name为a的位置处</h1>
       <h1 slot="b">加在子组件slot的name为b的位置处</h1>
    </com>//静态数据
  </div>
</template>

vue学习之组件(代码片段)

vue官方文档中定义组件通过调用Vue.component方法，一般没使用定义组件一个组件为一个vue文件，包含template（必须有），script，style三部分 //com.vue<templatelang="html"><div>//只能有一个html标签包裹里面所有节点　　　ch... 查看详情

vue学习之todolist删除功能(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>vue</title>... 查看详情

vue学习之不同组件之间的消息传递(代码片段)

vue.js基础学习之组件

什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性... 查看详情

45.vue学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><scripttype="text/javascript"src="../js/vue.js"></script><!--<... 查看详情

vue.js基础学习之混合mixins

混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。当组件使用了混合对象时，混合对象的所有选项将被“混入”组件自己的选项中。当混合对象与组件包含同名选项时，这些选项将以适当的策... 查看详情

vue2.0学习之组件间通信

/*child.vue*/ 子组件 <template> <div> /*必须要用div包裹起来，然后在里面写需要的组件内容，这里面和平常写的html是一样的*/ <div> </template> <script> /*这里面写vue*/ /*引入其他vue组件*/ @importheaderfrom"./heade 查看详情

javagui组件学习之jframe(代码片段)

文章目录前言JFrame窗口结语前言Swing是新一代的图形界面工具。使用Swing来开发图形界面比AWT更加优秀，因为Swing是一种轻量级组件，它采用纯Java实现，不再依赖于本地平台的图形界面，所以可以在所有平台上保持... 查看详情

javagui组件学习之jframe(代码片段)

vue学习之介绍(代码片段)

一.vue概念#1.什么是Vue#Vue.js是一个渐进式JavaScript框架#渐进式：vue从小到控制页面中的一个变量到页面一块内容到整个页面，最终大到整个项目，东可以用vue框架来实现#vue可以干哪些事#将数据渲染到指定区域（数据可以是后台获... 查看详情

flutter学习之widget的显示和隐藏(代码片段)

flutter学习之widget的显示和隐藏1、Visbility组件2、Offstage组件3、Opacity组件4、通过组件的size控制5、空组件占位法在IOS的开发中，我们对于控件的隐藏和显示，只需要设置hidden属性，因为是View的一个基本属性，但是... 查看详情

flutter学习之widget的显示和隐藏(代码片段)

4.vuex学习之gettersmapgetters(代码片段)

gettters可以理解为计算属性在store.js中importVuefrom‘vue‘importVuexfrom‘vuex‘Vue.use(Vuex)//访问状态对象conststate=count:1constgetters=//vue2.0不要使用箭头函数,getters主要任务就是对状态state对象里面的数据，执行计算后输出count:function(state)ret... 查看详情

vue学习之父子组件通信两种方法

初学vue，最常用及实用的就是父子组件之间的通信了，在此记录一点自己的学习过程方法一：props及$emit父组件中先引入子组件，然后components里面注册组件，然后template里调用，调用的时候通过v-bind传递值给子组件，v-on监听子组... 查看详情

vue学习之父组件与子组件之间的交互

1.父组件数据传给子组件父组件中的msgfather定义数据在之组件中通过设置props来取得希望从父组件中获得的值通过设置这两个属性就可以从父组件传数据到子组件2.子组件传数据给父组件(这里只介绍$emit)触发child-tell-me事件,并传参... 查看详情

vue.js源码学习之flag篇(代码片段)

TheProgressiveJavaScriptFramework——vuejs.org起因第一次接触Vue.js是因为要做一个通讯录的外包项目，这个项目要有前台展示和中后台管理，从轮子做起肯定是不明智的选择，所以当时初步定下的是Vue.js+ElementUI的技术栈。项目过程很漫... 查看详情

3.vuex学习之mutationsmapmutations(代码片段)

mutations状态更改　　在mutations对象中创建更改state状态的方法。mapMutations是vuex提供的辅助函数在store.js中importVuefrom‘vue‘importVuexfrom‘vuex‘Vue.use(Vuex)//访问状态对象conststate=count:1//触发的状态，mutations是同步的constmutations=jian(st 查看详情

5.vuex学习之acrionsmapactions(代码片段)

Action类似于mutation，不同在于：　　1.Action提交的是mutation，而不是直接变更状态。　　2.Action可以包含任意异步操作。在store.js中importVuefrom‘vue‘importVuexfrom‘vuex‘Vue.use(Vuex)//访问状态对象conststate=count:1,age:10//触发的状态，mutatio... 查看详情