精华内容
下载资源
问答
  • 1、 用小写 2、不要用html已经用了得标签 3、import test from "@/components/test.vue"; 之后在这里也要注册: components: {test} 千万注意 这个地方是 { a,b,c } 不是 [a,b,c ] ...

    1、 用小写

    2、不要用html已经用了得标签

    3、import test from "@/components/test.vue";

        之后在这里也要注册:

         components: {test}

        千万注意  这个地方是 { a,b,c }  不是  [a,b,c ]

     

    4、动态组件 <component v-bind:is="get_com" :state="state"></component>

         似乎有状态保持,修改后需要刷新一下,才能看到改变

     

    5、居然还有个太坑爹的问题,变量居然不能以下划线开头

    data() {
    
    return {
    
    _abc:{total:128},
    
    }
    
    }

    _abc 必须改成  abc才能正常渲染

    展开全文
  • 一、Vue自定义组件 组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应对的组件即可...

    一、Vue自定义组件

    组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应对的组件即可。
    1.在项目的components里面新建一个组件
    (建议组件名字大写 防止与标签相撞)
    在这里插入图片描述
    2.在组件.vue的script里面写上name
    在这里插入图片描述
    3. 在app.vue里面导入 app.vue属于全局配置
    js中先引入组件
    在这里插入图片描述
    4.引用完一定记得有使用 不然会报错 在template里面使用一下组件
    在这里插入图片描述

    二、Vue组件组件传值

    图解:
    在这里插入图片描述

    1.父传子
    父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息。
    ①使用props建立数据通道的渠道

    // 这是父组件
    <div id="app">
    // 这是子组件
        <child message="hello" ></child>
    </div>
    

    ②在子组件中通过props传递过来的数据

    Vue,component('child',{
        props:['message'] 
    })
    

    2.子传父
    子组件可以通过emitvm.emit触发父组件的自定义事件。vm.emit(event,arg) 用于触发当前实例上的事件;
    ①子组件中需要一个点击事件触发一个自定义事件

    <template>
      <div>
        子组件:
        <span>{{childValue}}</span>
        <!-- 定义一个子组件传值的方法 -->
        <input type="button" value="点击触发" @click="childClick">
      </div>
    </template>
    <script>
      export default {
        data () {
          return {
            childValue: '我是子组件的数据'
          }
        },
        methods: {
          childClick () {
            // childByValue是在父组件on监听的方法
            // 第二个参数this.childValue是需要传的值
            this.$emit('childByValue', this.childValue)
          }
        }
      }
    </script>
    

    ②在父组件中的子标签监听该自定义事件得到传递的值

    <template>
      <div>
        父组件:
        <span>{{name}}</span>
        <br>
        <br>
        <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
        <child v-on:childByValue="childByValue"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        },
        methods: {
          childByValue: function (childValue) {
            // childValue就是子组件传过来的值
            this.name = childValue
          }
        }
      }
    </script>
    

    3.非父子传值
    非父子组件之间传值,需要一个公共的vue来进行传递值和获取值,作为中间仓库来传值,不然路由组件之间达不到传值的效果

    展开全文
  • Vue自定义组件

    2020-07-23 12:47:11
    Vue自定义组件 1、在src中components中,新建Header.vue(名字可自定义)组件(首字母建议大写) 2、Header.vue内容 3、在app.vue中引用组件 第一步引入组件 import Header from './components/Header.vue' 第二步...

    Vue自定义组件
    1、在src中components中,新建Header.vue(名字可自定义)组件(首字母建议大写)
    在这里插入图片描述
    2、Header.vue内容
    在这里插入图片描述
    3、在app.vue中引用组件
    第一步引入组件

    import Header from './components/Header.vue'

    第二步在export default注册组件
    在这里插入图片描述
    第三步使用组件

    <Header></Header>
    展开全文
  • vue自定义组件: 1、在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2、Weekly.vue: 3、在app.vue中引用组件: js中先引入 // 第一步引入组件 importWeeklyfrom'./...

    vue自定义组件:

    1、在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue

    2、Weekly.vue:

    3、在app.vue中引用组件:

    js中先引入

    // 第一步引入

    import Weekly from './components/Weekly.vue'

    // 第二步export default注册

      components: {

        Weekly

      }

    <!-- 第三步使用 -->

    <Weekly></Weekly>

    Vue组件组件传值:父传子、子传父、子传子:

    Vue常用的三种传值方式有:

    • 父传子

    • 子传父

    • 非父子传值

    1. 父组件向子组件进行传值: 

    父组件:
    <template>
      <div>
        父组件:
        <input type="text" v-model="name">
        <br>
        <br>
        <!-- 引入子组件 -->
        <child :inputName="name"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        }
      }
    </script>
    
    子组件:
    <template>
      <div>
        子组件:
        <span>{{inputName}}</span>
      </div>
    </template>
    <script>
      export default {
        // 接受父组件的值
        props: {
          inputName: String,
          required: true
        }
      }
    </script>

    2. 子组件向父组件传值:

    子组件:
    <template>
      <div>
        子组件:
        <span>{{childValue}}</span>
        <!-- 定义一个子组件传值的方法 -->
        <input type="button" value="点击触发" @click="childClick">
      </div>
    </template>
    <script>
      export default {
        data () {
          return {
            childValue: '我是子组件的数据'
          }
        },
        methods: {
          childClick () {
            // childByValue是在父组件on监听的方法
            // 第二个参数this.childValue是需要传的值
            this.$emit('childByValue', this.childValue)
          }
        }
      }
    </script>
    
    父组件:
    <template>
      <div>
        父组件:
        <span>{{name}}</span>
        <br>
        <br>
        <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
        <child v-on:childByValue="childByValue"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        },
        methods: {
          childByValue: function (childValue) {
            // childValue就是子组件传过来的值
            this.name = childValue
          }
        }
      }
    </script>

    3. 非父子组件进行传值:

    非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。

    公共bus.js:
    import Vue from 'vue'
    export default new Vue()
    
    组件A:
    <template>
      <div>
        A组件:
        <span>{{elementValue}}</span>
        <input type="button" value="点击触发" @click="elementByValue">
      </div>
    </template>
    <script>
      // 引入公共的bug,来做为中间传达的工具
      import Bus from './bus.js'
      export default {
        data () {
          return {
            elementValue: 4
          }
        },
        methods: {
          elementByValue: function () {
            Bus.$emit('val', this.elementValue)
          }
        }
      }
    </script>
    
    组件B:
    <template>
      <div>
        B组件:
        <input type="button" value="点击触发" @click="getData">
        <span>{{name}}</span>
      </div>
    </template>
    <script>
      import Bus from './bus.js'
      export default {
        data () {
          return {
            name: 0
          }
        },
        mounted: function () {
          var vm = this
          // 用$on事件来接收参数
          Bus.$on('val', (data) => {
            console.log(data)
            vm.name = data
          })
        },
        methods: {
          getData: function () {
            this.name++
          }
        }
      }
    </script>

     

    展开全文
  • vue自定义组件引用的方法

    千次阅读 2019-10-10 09:38:50
    1.新建一个vue文件,写好样式后,export出去,父组件传参在props里面定义好,然后在在自组价里面使用。 如下:export default { name: 'firstTitle', ...2.父组件引用方法: <firstTitle title="通话记录...
  • vue自定义组件

    2019-10-22 21:44:01
    1. 组件写在那个文件夹下? 写在componetes文件目录下 2.自定义文件怎么写?... 在index页面的自定义组件页面 component.vue //自定义组件页面 <template> <div> <div> <but...
  • 在文档 使用自定义事件的表单输入组件 一节中提到了,v-model其实是个语法糖。这不过是以下示例的语法糖://简写:也就是说,你只需要在组件中声明一个name为value的props,并且通过触发input事件传入一个值,就能...
  • vue-03-5:vue自定义组件并在其他地方引用该组件 一、自定义一个组件 1、在src/components新建一个组件 注意事项: a、新定义的组件一定要使用template标签包裹。 b、每个自定义主键可能都有自己自定义的样式,...
  • vue自定义组件与传值

    2020-07-23 17:28:21
    一、自定义组件 1、在src中components中,新建组件(首字母建议大写) 2、在app.vue引用组件 第一步: import Header from ‘./components/你创建组件得名字’ 第二步 :在export default注册组件 components: { ...
  • 1、在src中components中,新建Header.vue组件(首字母建议大写) 2、Header.vue 建议安装Vetur插件,输入vue可自动...3、在app.vue引用组件 注意要在需要的页面引用,这里用App.vue示例 到此组件引用完成啦 ...
  • 一、Vue自定义组件 1、在src中components中,新建Header.vue组件(首字母建议大写) 2、Header.vue 3、在app.vue中引用组件 第一步引入组件 第二步在export default注册组件 第三步使用组件 运行结果: 二、Vue...
  • vue自定义组件三步走

    2018-05-09 14:49:19
    如图所示:我自定义了两个组件,一个是Head.vue,一个是Foot.vue我现在在Page01.vue中用他们两个,公分三步1,引用2,注册3,使用
  • Vue自定义组件中使用Element-UI Dialog组件,点击关闭报错 [Vue warn] Avoid mutating a prop directly 这是由于自定义组件使用了传入的prop作为 Dialog 的visible绑定值,导致Dialog关闭直接修改了prop而被vue警告...
  • easycom的作用:传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、...
  • vue自定义组件

    2019-01-28 17:43:19
    在网上都到的都是引用vue.js这种的,原生的vue自定义组件方式如下: 1、组件假如为a.vue,和引用它的b.vue在同一级的文件夹下; 2、在b.vue中写入的script内部写入: import star_a from './a.vue' export ...
  • vue自定义组件及在script中引用图片详解 首先要将新建的文件放在components文件夹中 然后回到app.vue中 在app.vue中引用组件 我们以新建的Header.vue为例 important Hearder from './components/Header.vue' 在...
  • 【1】Vue创建自定义组件 (1)在src中components中,新建Header.vue组件 (2)编写Header.vue(在Header.vue之间编写vue即可) 选中一个 (3)在app.vue引用组件 js中先引入 // 第一步引入组件 import Header from...
  • 参考vue创建组件的方式: https://blog.csdn.net/WU5229485/article/details/82908068 ...https://doc.vue-js.com/v2/guide/components.html 我使用以下的方式自定义组件
  • Vue页面中引用自定义组件

    千次阅读 2019-07-22 17:53:20
    比如我想引用一个外部的头部导航的组件,因为这个导航在很多地方都用到,避免每个页面都写一遍 首先 我先在components这里创建一个navmenu的组件 这里是组件的内容,引用了element ui <template> <el-tabs...
  • 本来是使用第三方库 vant的vue 组件库 的popup,后来在popup中使用better-scroll插件的时候,出现并不兼容的情况,也就自己搭建一个popu插件,中间遇到很多问题,都会记录一下,给自己一些...2.组件引用(目前是选...
  • 涉及知识点是Vue.js官网教程中的插件使用方法如下:首先我遇到的问题就是我自定义组件如果需要在项目中其他组件中多次被调用,而我之前的解决方法就是简单的,哪里需要在哪引用。这无疑增加了许多代码重复。而在...
  • Vue-自定义组件

    千次阅读 2018-04-25 09:27:42
    这意味着不能在子组件的模板内直接引用组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。如何在其他的vue文件中使用这个star组件呢?如下图所示,首先通过import引入st...
  • 首先我遇到的问题就是我自定义组件如果需要在项目中其他组件中多次被调用,而我之前的解决方法就是简单的,哪里需要在哪引用。这无疑增加了许多代码重复。 而在使用Vue.js的一些UI框架的时候则注意到,只需要在...
  • 自定义标题1、页面效果2、思路3、Loading.vue 组件4、loading文件夹下的 index.js5、在main.js中注册6、引用 1、页面效果 2、思路 在component文件夹下新建loading文件夹,用于存放Loading.vue,index.js 和其他依赖...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 390
精华内容 156
关键字:

vue自定义组件引用

vue 订阅