vuejs 单文件组件.vue 文件的使用

2023-09-27 09:58:16 140

vuejs自定义了一种.vue文件，可以把html,css,js写到一个文件中，从而实现了对一个组件的封装，一个.vue文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。在webpack构建中，需要安装vue-loader对.vue文件进行解析。在sumlime编辑器中，我们书写.vue文件，可以安装vuesyntaxhighlight插件，增加对文件的支持。

用vue-cli新建一个vue项目，看一下.vue文件长什么样？在新建项目的过程中，命令行中会询问你几个问题，当询问是否安装vue-router时，这里先选择否。项目完成后，我们看到src 目录下有一个componet目录，里面有一个Hello.vue文件，内容如下，这里对template里面的内容做了一些删减






h1,h2{
font-weight:normal;
}

ul{
list-style-type:none;
padding:0;
}

li{
display:inline-block;
margin:010px;
}

a{
color:#42b983;
}

可以看到，在.vue文件中，template中都是html代码，它定义了在页面中显示的内容，由于里面还有变量，也可以说定义了一个模版；script中都是js代码，它定义这个组件中所需要的数据和及其操作，style里面是css样式，定义这个组件的样式，scoped表明这里写的css样式只适用于该组件，可以限定样式的作用域。

script标签中exportdefalut后面的对象的理解。

在不使用.vue单文件时，我们是通过Vue构造函数创建一个Vue根实例来启动vuejs项目，Vue构造函数接受一个对象，这个对象有一些配置属性el,data,component,template等，从而对整个应用提供支持。

newVue({
el:'#app',
data:{
msg:"helloVue"
}
})

在.vue文件中，exportdefault后面的对象就相当于newVue()构造函数中的接受的对象，它们都是定义组件所需要的数据（data）,以及操作数据的方法等，更为全面的一个exportdefault对象，有methods,data,computed,这时可以看到,这个对象和newVue()构造函数中接受的对象是一模一样的。但要注意data的书写方式不同。在.vue组件,data必须是一个函数，它return（返回一个对象），这个返回的对象的数据，供组件实现。

把项目中自带的hello.vue内容清空，我们自己写一个组件来体验一下这种相同。






input{
width:200px;
height:20px;
}
p{
color:red;
}

页面中有一个input输入框，当进行输入的时候，输入框下面的内容会进行同步显示，只不过它是大写，当输入完成后，按enter键就会弹出我们输入的内容。获取用户输入的内容，我们用的是v-model指令，这个指令将用户输入的内容绑定到变量上，并且它响应式的，我们的变量值会随着用户输入的变化而变化，也就是说我们始终获取的都是用户最新的输入。下面大写的显示，用的是computed属性，弹窗则是给绑定了一个keypress事件，通过描述，你会发现，它简直就是一个vue实例，实际上它就是个vue实例。每一个vue组件都是一个vue实例，更容易明白exportdefault后面的对象了。

父子组件之间的通信

每一个.vue文件就是一个组件，组件和组件相互组合，就成了一个应用，这就涉及到的组件和组件之间的通信，最常用的就是父子之间的通信。在vue中，在一个组件中通过import引入另一个组件，这个组件就是父组件，被引入的组件就是子组件。

在我们这个vue-cli项目中，src文件夹下有一个App.vue文件，它的script标签中，importHellofrom'./components/Hello'，那么App.vue就是父组件，components文件夹下的Hello.vue就是子组件。父组件通过props向子组件传递数据，子组件通过自定义事件向父组件传递数据。

父组件向子组件传值,它主要是通过元素的属性进行的.在App.vue的template中,有一个,这就是我们引入的子组件. 给其添加属性如mes-father="messagefromfather"; 父组件将数据传递进去,子组件需要接收才能使用.怎样接收呢?

在Hello.vue中,exportdefault后面的对象中,添加一个字段props,它是一个数组,专门用来接收父组件传递过来的数据.props:["mesFather"],这里定义了mesFather字符串,和父组件中定义的元素的属性一一对应.但是我们在父组件,就是在元素中定义的属性是mes-father，没有一一对应啊? 这主要是因为，在html元素中大小写是不敏感的。如果我们写成，里面的mesFather 就会转化成mesfather,相当于我们向子组件传递了一个mesfather数据，如果在js文件中，我们定义props:["mesFather"]，我们是接受不到数据的，因为js是区分大小写的，只能写成props:["mesfather"]. 但是在js文件中，像这种两个单词拼成的数据，我们习惯用驼峰命名法，所以vue做了一个转化，如果在组件中属性是-表示，它自动会转化成驼峰式。传进来的数据是mes-father,转化成mesFather,我们在js里面写mesFather,一一对应，子组件可以接受到组件。props属性是和data，methods属性并列的，属同一级别。props属性里面定义的变量，在子组件中的template中可以直接使用。

App.vue的template更改如下：

Hello.vue组件，这里还是把项目中自带的Hello.vue清空，自己写，变成如下内容

这时，在页面中看到messagefromfather字样，父元素向子元素传递数据成功。

子组件向父组件传递数据，需要用到自定义事件。例如，我们在Hello.vue，写入一个input,接收用户输入，我们想把用户输入的数据传给父组件。这时，input需要先绑定一个keypress事件，获取用户的输入，同时还要发射自定义事件，如valueUp,父组件只要监听这个自定义事件，就可以知道子组件要向他传递数据了。子组件在发射自定义事件时，还可以携带参数，父组件在监听该事件时，还可以接受参数，参数，就是要传递的数据。

在Hello.vuetemplate中，添加一个input输入框，给它一个v-model获取用户的输入，再添加keypress的事件，用于发射事件，传输数据。script中添加data，定义变量来获取用户的输入，添加methods来处理keypress事件的处理函数enter,整个Hello.vue文件如下

在App.vue中，template中hello组件绑定一个自定义事件，@valueUp=“receive”,用于监听子组件发射的事件，再写一个p元素，用于展示子组件传递过来的数据，

子组件传递过来的数据{{childMes}}

相应地，在scrpit中，data中，定义一个变量childMes,并在methods中，定义一个事件处理函数reciever。整个App.vue修改如下：

这时在input中输入内容，然后按enter键，就以看到子组件传递过来的数据，子组件向父组件传递数据成功。

当在input输入框中输入数据，并按enter键时，它会触发keypress.enter事件，从而调用事件处理函数enter，在enter中，我们发射了一个事件valueUp，并携带了一个参数，由于在组件中，我们绑定valueUp事件，所以父组件在时刻监听valueUp事件，当子组件发射value事件时，父组件立刻捕获到，并立即调用它的回调函数receive,在receive中，我们获取到子组件传递过来的数据，并赋值了data中的变量childMes,由于data数据发生变化，从而触发dom更新，页面中就显示子组件传递过来的内容。

其实在子组件中，props最好的写法是props验证，我们在子组件Hello.vue中写props:['mesFather'],只是表达出，它接受一个参数mesFather,如果写成props验证，不仅能表达出它需要什么参数，还能表达参数类型，并且如有错误，vue会做出警告。现在把props改成props验证的写法,Hello.vue中的js中的props修改如下：

props：{
'mesFather':{
type:String,
default:'fromfather',
required:true
}
}

如果是组件与组件之间的通信非常复杂，不光是父子组件，还有兄弟组件，那就需要用到状态管理，vuex

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

vuejs 单文件组件.vue 文件的使用

{{msg}}

EssentialLinks

随机推荐

vuejs 单文件组件.vue 文件的使用

{{msg}}

EssentialLinks

热门推荐

随机推荐