【免费】vue各种组件定义及父子之间控件传值资源-CSDN文库

共6个文件

html：5个

js：1个

vue.js

javascript

ecmascript

前端框架

需积分: 0 191 浏览量更新于2022-04-20 收藏 84KB RAR 举报

Vue.js 是一款流行的轻量级前端JavaScript框架，它简化了Web开发中的许多复杂性，特别是通过组件化的方式。本篇文章将深入探讨Vue.js中的组件定义及其父子之间数据的传递。一、Vue.js组件定义 Vue.js组件是可重用的代码块，可以看作是自包含的小型应用。它们有自己的视图和数据逻辑，可以通过属性接收输入，并通过事件向外部发送输出。创建组件的基本步骤如下： 1. **注册组件**：首先需要在Vue实例中注册组件，例如： ```javascript Vue.component('my-component', { template: '<div>这是我的组件</div>' }); ``` 2. **定义模板**：组件的HTML结构通常在`template`选项中定义，也可以使用ES6的字符串模板或单文件组件（.vue文件）。 3. **数据和方法**：组件内部可以有自己独立的数据（`data`选项）和方法（`methods`选项），如： ```javascript Vue.component('my-component', { data() { return { message: 'Hello World!' }; }, methods: { greet() { alert(this.message); } }, template: '<button @click="greet">{{ message }}</button>' }); ``` 二、父组件向子组件传递数据 Vue.js提供了`props`选项来从父组件向子组件传递数据。在子组件中声明需要接收的props，并在父组件中通过属性绑定（`v-bind`）传递数据： ```javascript // 子组件 Vue.component('child-component', { props: ['parentMessage'], template: '<span>{{ parentMessage }}</span>' }); // 父组件 new Vue({ el: '#app', data: { parentData: '这是来自父组件的数据' }, template: ` <div> <child-component :parent-message="parentData"></child-component> </div> ` }); ``` 三、子组件向父组件通信子组件向父组件传递数据主要通过触发自定义事件（`$emit`）。子组件中触发事件： ```javascript methods: { childEvent() { this.$emit('child-event', '这是子组件的消息'); } } ``` 然后在父组件中监听这个事件： ```html <child-component @child-event="handleChildEvent"></child-component> ``` 父组件定义处理函数： ```javascript methods: { handleChildEvent(message) { console.log('接收到子组件的消息:', message); } } ``` 四、非父子组件间的通信非父子组件之间的通信通常借助事件总线（Event Bus）或Vuex状态管理库。Event Bus是一个简单的Vue实例，用于在组件间传递消息。Vuex则更适用于大型应用的状态管理，提供集中式的存储和管理方式。总结，Vue.js的组件系统是其强大功能的核心，通过合理地定义和组合组件，以及高效的数据传递机制，开发者可以构建出复杂的前端应用。了解并熟练掌握这些知识点，将极大地提升Vue.js开发的效率和质量。

收起资源包目录

VueTest.rar （6个子文件）

VueTest

局部组件.html 979B

子父控件传值.html 0B

template.html 2KB

全局组件定义.html 850B

vue.js 336KB

1.html 2KB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <gcpn></gcpn> <partcpn></partcpn> <xtemplatecpn></xtemplatecpn> <tempcpn :sonfruit="fruit" @itemclick="fathermethod"></tempcpn> <input type="text" placeholder="点击上面父子传到父类控件过来吧" id="faText" style="width:500px"/> </div>    <script type="text/x-template" id="xtemp"> <div><span>我是x-template子组件</span> <ol> <li v-for="item in person">{{item}}</li> </ol> </div> </script> <template id="temp"> <div> <span>我是 template子组件帅吧，父传子，子传父</span> <ol> <li v-for="fruit in sonfruit" @click="childrenclick(fruit)">{{fruit}}</li> </ol> </div> </template> <script> var gcpn= Vue.extend({ template: `<div><span>我是全局子组件</span></div>` }); //这里是定义全局组件 Vue.component("gcpn",gcpn); new Vue({ el:"#app", data:{ fruit:["apple","banana","peach","watermelon","orange"] }, methods:{ fathermethod:function(item){ var text=document.getElementById("faText"); text.value= text.value+" "+item ; } }, components:{ "partcpn":{ template:`<div><span>我是局部子组件</span></div>`}, "xtemplatecpn":{ template:"#xtemp", //子类的data和父类有些不同，需要是一个函数。 data(){ return {person:["man","woman","girl","boy"]} } }, "tempcpn":{ template:"#temp", //定义子类属性，接收传值 props:{ sonfruit:[]} , methods: { childrenclick:function( item) { //绑定父类方法的事件 this.$emit("itemclick",item); } } } } }) </script> </body> </html>