目录
一、组件:
组件目录
1、注册组件(全局组件、局部组件和demo、template模块):
(1)注册组件的基本步骤:
(2)全局组件demo:
(3)局部组件demo:
(4)template模块的简化(模板的分离写法):即将其内容封装到 template 标签里。
2、组件数据存放:
(1)组件对象也有一个data属性
(2)☆这个data属性必须是一个函数,且函数返回一个对象,对象内部保存着数据
3、父子组件通信(父级向子级传递数据、子级向父级传递数据)
(1)父级向子级传递数据【Prop】:
ps:Prop 验证(组件可以为 props 指定验证要求):
(2)子级向父级传递数据【emit】:
4、Vue父子组件存储数据的访问:
(1)父组件访问子组件data中存储的数据:使用$children或 $refs
(2)$refs的使用:
(3)子组件访问父组件:使用$parent
二、插槽slot
1、编译作用域:
2、slot基本使用:
3、具名插槽slot:
1、注册组件(全局组件、局部组件和小demo)
2、组件数据存放
3、父子组件通信(父级向子级传递数据、子级向父级传递数据)
4、父子组件存储数据的访问:
5、插槽slot
① 创建组件构造器对象 Vue.extend( ); 方法【可以省略】
② 注册组件 Vue.component({ 组件的标签名:组件构造器对象} );
③ 使用组件,在Vue实例的作用域范围内使用
<div id="app"> <runoob></runoob> </div> <script> // 注册 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script>
<div id="app"> <runoob></runoob> </div> <script> var Child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': Child } }) </script>
<!-- 使用组件 --> <my-cpn></my-cpn> <!-- 模板 --> <template id="cpn"> <div> <h1>nihao</h1> </div> </template> let app = new Vue({ el: '#app', components: { 'my-cpn': {template: `#cpn`} } });
● Prop:子组件在自身标签上,使用自定义的属性来接收外界(也可以是父组件)的数据,然后将数据接收到prop中。【接收父组件的数据—动态Prop,需要v-bind绑定属性,数据可以从vue实例中获取】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html暂时不支持驼峰写法</title> </head> <body> <div id="app"> <!-- 子组件要或者外界(例如也可以是父组件)的数据,它是需要在自身标签上,使用props中自定义的属性来接收, 若是想接收的数据来自父组件【Vue实例】------通过绑定属性(数据可以从vue实例中获取) --> <!--静态的prop--> <cpn c-info="info"></cpn><br/> <!--动态prop--> <cpn :c-info="info"></cpn> </div> <template id="cpn"> <div> <h1>cpn的内容</h1> <ul> <li v-for="item in cInfo">{{item}}</li> </ul> </div> </template> </body> <script type="text/javascript" src="./js/vue.min.js"></script> <script> const cpn = { template: `#cpn`, props:{ cInfo: { type: Object, default(){ return {} } } }, } let app = new Vue({ el: '#app', data: { message:'动态绑定属性v-bind', abc: { id: '1', name: '父类的info中的name', age: '1' }, info: { id: '1', name: '父类的info中的name', age: '15' } }, components: { cpn } }); </script> </body> </html>
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 } } } })
● 子组件通过$emit(‘自定义事件名’, 数据变量)向父组件发送消息,在子组件进行自定义的事件进行监听【监听调用的函数可以直接通过一个自定义的参数接收到数据变量】
<!-- 父组件 --> <div id="app"> <!-- 子组件上监听到自定义的事件的同时,也监听到发送的数据num,事件指向的函数,通过自定义一个参数value可以直接拿到数据num --> <cpn :c-info="info" @item-click="itemClick"></cpn> </div> <!-- 子组件的模板 --> <template id="cpn"> <div> <h1>子组件的模板</h1> <button v-for="item in cInfo" @click="btnClick(item)">{{item}}</button> </div> </template> </body> <script type="text/javascript" src="js/vue.min.js"></script> <script> const cpn = { template: `#cpn`, data(){ return{ num: 99 } }, props:{ cInfo: { type: Object, default(){ return {} } } }, methods: { btnClick(item){ console.log('子组件接收到父组件传递的数据' + item); //$emit的第一个参数是自定义的事件名称和发送数据num this.$emit('item-click', this.num); } } } let app = new Vue({ el: '#app', data: { info: { id: '1', name: 'yile', age: '15' } }, methods: { itemClick(value){ console.log('父组件监听到子组件发出的事件和接收到子组件的数据' + value); } }, components: { cpn } }); </script>
(注意:this.$children得到的是一个数组,包含所有子组件对象。)
■ $refs和ref指令通常是一起使用的
■ 首先,我们通过ref给某一个子组件绑定一个特定的ID
■ 其次,通过this.$refs.ID就可以访问到该组件了
父组件模板的所有东西(例如变量)都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。