组件（Prop、$emit）父子组件之间传值、import在vue中使用

最新推荐文章于 2024-06-02 21:27:30 发布

初闻女人香

最新推荐文章于 2024-06-02 21:27:30 发布

阅读量376

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_70251011/article/details/136204444

版权

组件.

首先，注册一个全局功能的组件格式如下：

Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。

调用组件方法：

<tagName></tagName>

最基础的全局组件runoob案例：

<body>
<div id="app">
	<runoob></runoob>
</div>

<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</body>

局部组件案例：

<body>
<div id="app">
	<runoob></runoob>
</div>

<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}

// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

子组件Prop

单向向下绑定，只能父组件修改子组件的值，子组件不能修改父组件的值。

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”，
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

子组件的使用，把myname变量通过props导出：

<template>
    <div>
        我是消息页面{{myname}}
    </div>
</template>
<script>
export default{
    props:['myname'],
}
</script>

相对应的父组件的使用

//如果myname后面接的是一个静态字符串，可以不适用v-bind
<my-message myname="jack"></my-message>
//通过v-bind定义一个动态值，如果myname后面接的是一个变量，则要使用v-bind,如下：
<template>
  <div>
    <my-message :myname="whosname"></my-message>
  </div>
</template>
<script>
export default {
  data() {
    return {
      whosname: "lisa",
    };
  },
};
</script>

父传子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

<body>
    <div id="app">
        <div>
            <input v-model="parentMsg">
            <br>
            <child v-bind:message="parentMsg"></child>
        </div>
    </div>
</body>
<script>
    // 创建根实例
    new Vue({
        el: '#app',
        data: {
            parentMsg: '这是父组件内容'
        }
    })
    // 注册
    Vue.component('child', {
        // 声明 props
        props: ['message'],
        // 同样也可以在 vm 实例中像 “this.message” 这样使用
        template: '<span>{{ message }}</span>'
    })

</script>

</html>

Prop验证：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组
子组件触发父组件方法时：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件通过 $emit 触发父组件的方法时，如果需要传递参数，可在方法名后面加可选参数，参数以逗号隔开。</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<body>
    <div id="app">
        <div id="counter-event-example">
            <p>{{ total }}</p>
            <button-counter v-on:increment="incrementTotal"></button-counter><br />
            <button-counter v-on:increment="incrementTotal"></button-counter>
        </div>
    </div>
</body>
<script>
    Vue.component('button-counter', {
        template: '<div><button v-on:click="incrementHandler(1)">-</button>{{ counter }}<button v-on:click="incrementHandler(2)">+</button></div>',
        data: function () {
            return {
                counter: 0
            }
        },
        methods: {
            incrementHandler: function (v) {
                if (v == 1) {
                    this.counter -= 1
                    this.$emit('increment', 1)
                } else {
                    this.counter += 1
                    this.$emit('increment', 2)
                }

            }
        },
    })
    new Vue({
        el: '#counter-event-example',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function (d) {
                if (d == 1) {
                    this.total -= 1
                } else {
                    this.total += 1
                }

            }
        }
    })
</script>

</html>

import在vue中使用

引入第三方插件：import echarts from 'echarts'
引入工具：

第一种  引入单个方法
import {axiosfetch} from ‘./util’;

下面是写法，需要export导出
export function axiosfetch(options) {

}

第二种  导入成组的方法

import * as tools from './libs/tools'

其中tools.js中有多个export方法,把tools里所有export的方法导入

vue中怎么用呢？
Vue.prototype.$tools = tools
直接用 this.$tools.method调用就可以了

export 和 export default 又有什么区别呢？
下面看下区别

先是 export 
import {axiosfetch} from './util';  //需要加花括号  可以一次导入多个也可以一次导入一个，但都要加括号
如果是两个方法
import {axiosfetch,post} from './util'; 
再是 export default 
import axiosfetch from './util';  //不需要加花括号  只能一个一个导入

导入CSS文件：

import 'iview/dist/styles/iview.css';

如果是在.vue文件中那么在外面套个style
<style>
  @import './test.css';
 </style>

导入组件：

import name1 from './name1'
import name2 from './name2'
    components:{
         name1,
         name2,
    },

导入JS：

比如你想给Arrary封一个属性，首先需要新建一个prototype.js的文件
文件里
Array.prototype.max = function(){ 
    return Math.max.apply({},this); 
}

import './libs/prototype'
在main.js中引用那么在所有的组件都可以用
[].max();