Vue中组件的使用
关注公众号 资源自由分享 回复 vue 领取整套教程
方式一
1、使用Vue.extend创建组件
var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构 })
2、使用 Vue.component('组件的名称', 创建出来的组件模板对象) 注册组件
Vue.component('myCom1', com1)
注意：如果使用Vue.Component 定义全局组件的时候，组件的名称使用了驼峰命名，则在引用组件的时候需要吧大写的驼峰该为小写的字母，同时，两个单词之前，使用 – 链接。如果不使用则直接拿名称来使用即可。
完整示例：
<div id="app"> <!-- 如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可 --> <mycom1></mycom1> </div> <script> // 1.1 使用 Vue.extend 来创建全局的Vue组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构 }) // 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象) Vue.component('myCom1', com1) // 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接； // 如果不使用驼峰,则直接拿名称来使用即可; // Vue.component('mycom1', com1) // Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的 // 第二个参数: Vue.extend 创建的组件 ,其中 template 就是组件将来要展示的HTML内容 Vue.component('mycom1', Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' })) // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script>
方式二
直接使用Vue.component的方式创建
Vue.component('mycom2', { template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>' })
完整示例：
<div id="app"> <!-- 还是使用 标签形式,引入自己的组件 --> <mycom2></mycom2> </div> <script> Vue.component('mycom2', { template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>' }) // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script>
方式三
被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构
<template id="tmpl"> <div> <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1> <h4>好用,不错!</h4> </div> </template>
使用id注册组件
Vue.component('mycom3', {
template: '#tmpl'
})
完整示例
<div id="app"> <mycom3></mycom3> </div> <template id="tmpl"> <div> <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1> <h4>好用,不错!</h4> </div> </template>
<script>
Vue.component('mycom3', {
template: '#tmpl'
})
</script>
创建局部组件
局部组件的创建和全局组件的创建方法一样。唯一区别的是，局部组件是在vue实例中定义的
<div id="app2"> <mycom3></mycom3> <login></login> </div> <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 --> <template id="tmpl2"> <h1>这是私有的 login 组件</h1> </template> <script>var vm2 = new Vue({ el: '#app2', data: {}, methods: {}, filters: {}, directives: {}, components: { // 定义实例内部私有组件的 login: { template: '#tmpl2' } } }) </script>
组件中的data 和 methods：
1、 组件可以拥有自己的数据
2、 组件中的data 和实例中的data 有点不一样，实例中的data 可以为一个对象。但是组件中的data必须是一个方法
3、 组件中的data除了是一个方法，还必须返回一个对象。
4、 组件中的data 的使用方式和 实例中的data 使用方式一样
5、 组件中的Methods 的定义和使用与实例中一样
Vue.component('mycom1', { template: '<h1>这是全局组件 --- {{msg}}</h1>', data: function() { return { msg: '这是组件的中data定义的数据' } } })
父组件向子组件传值：
1、 父组件通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
2、 子组件需要在内部定义props 属性。例如 props : [ ‘parentmsg’ ] 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
3、 所有props 中的数据都是通过 父组件传递过来的
<div id="app"> <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --> <com1 v-bind:parentmsg="msg"></com1> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '123 啊-父组件中的数据' }, methods: {}, components: { com1: { data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上； // data 上的数据，都是可读可写的； return { title: '123', content: 'qqq' } }, template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>', // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的 props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据 directives: {}, filters: {}, components: {}, methods: { change() { this.parentmsg = '被修改了' } } } } }); </script>
子组件向父组件传值
子组件向父组件传值是通过方法的方式
<div id="app"> <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 --> <com2 @func="show"></com2> </div> <template id="tmpl"> <div> <h1>这是 子组件</h1> <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick"> </div> </template> <script> // 定义了一个字面量类型的 组件模板对象 var com2 = { template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构 data() { return { sonmsg: { name: '小头儿子', age: 6 } } }, methods: { myclick() { // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？ // emit 英文原意： 是触发，调用、发射的意思 this.$emit('func', this.sonmsg) } } } // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { datamsgFormSon: null }, methods: { show(data) { // console.log('调用了父组件身上的 show 方法: --- ' + data) // console.log(data); this.datamsgFormSon = data } }, components: { com2 // com2: com2 } }); </script>