vue组件

全局组件

三步走: 创建vue-->注册全局组件-->在页面中使用全局组件

<body>
<div id="box">
	# 第三步 使用(在布局页面中使用)
    <global_component></global_component>
</div>

<script>
	# 第二步 注册(绑定关系,创建全局组件)
    Vue.component('global_component',{
        template:`<h2> hello world! </h2>`,
    });
    # 第一步 创建vue
    new Vue({
        el:'#box',
    })
</script>
</body>

　　

局部组件

第一种用法:简单使用,跟全局组件类似(三步走),但是会渲染进DOM

<body>
<div id="demo">
    # 第三步:在布局中使用
    <my_component></my_component>
</div>

<script>
    # 第一步:定义一个object类型的变量
    let local_component = {
        template:`<h2> hello world! </h2>`
    };
    new Vue({
        el:'#demo',
        # 第二步:在创建vue实例中引入定义好的变量
        components:{'my_component':local_component}
    })
</script>
</body>

第二种用法:以template为根元素,不会渲染进DOM (两步搞定)

局部组件之间的使用

<body>
<div id="demo">
    <demo_local></demo_local>  # 模板渲染
</div>

<script>
    # 定义第一个局部组件变量
    let header = {
        template:`<h1>{{ local_demo }}</h1>`,
        data(){
            return {
                'local_demo':'唧唧复唧唧,木兰当户织,不闻机杼声,惟闻女叹息!'
            }
        }
    };
    # 定义第二个局部组件变量
    let footer = {
        template:`<h1>{{ local_demo2}}</h1>`,
        data(){
            return{
                'local_demo2':'问女何所思,问女何所忆.'
            }
        }
    };
    # 定义第三个局部组件变量
    let local = {
        template:`<div>
                        <my_demo3></my_demo3>
                        <my_demo4></my_demo4>
                   </div>`,
        components:{ # 引入第一第二个局部组件
            'my_demo3':header,
            'my_demo4':footer
        }
    };
    # 创建vue实例
    new Vue({
        el:'#demo',
        components:{ # 引入第三个局部组件
            'demo_local':local
        }
    })
</script>
</body>

 

组件之间的传值:　　

父子组件之间的通信(传值):

  1. 在父组件里面的子组件中v-bind:变量名='变量'绑定一个自定义属性

  2. 在子组件中使用props接收这个数据(变量名)

<body>

  <div id="app">
        <app-container></app-container>
  </div>
  <script>
    // 2. 在子组件中使用props接收这个数据
    let Header = {
        template: `
            <div>
                {{ fatherData }}
            </div>
        `,
        props: ['fatherData']
    };

    // 1. 在父组件里面的子组件中绑定一个自定义属性
    let Container = {
        template: `
            <div>
                <app-header v-bind:fatherData="fd"></app-header>
            </div>
        `,
        data(){
            return {
                fd: "我是你爸爸~~~"
            }
        },
        components: {
            'app-header': Header,
        }
    };

    new Vue({
        el: '#app',
        components: {
            'app-container': Container
        }
    })
  </script>

　

子父组件之间的互相传值:

　　1.在子组件中用过$emit(自定义事件)向外抛出自定义事件

　　2.在父组件中用v-on:自定义事件 监听子组件，并且接收传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>总数：{{ totalNum }}</p>

   <my-button v-on:aaa="addTotal"></my-button>
   <my-button v-on:aaa="addTotal"></my-button>
   <my-button v-on:aaa="addTotal"></my-button>
   <my-button v-on:aaa="addTotal"></my-button>
   <my-button v-on:aaa="addTotal"></my-button>
   <my-button v-on:aaa="addTotal"></my-button>
   <my-button v-on:aaa="addTotal"></my-button>
   <my-button v-on:aaa="addTotal"></my-button>
   <my-button v-on:aaa="addTotal"></my-button>

</div>

<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script>

    // 注册全局组件
    Vue.component('my-button', {
        template: `<button v-on:click="add">{{ this.num }}</button>`,
        data(){
            return {
                num: 0
            }
        },
        methods: {
            add(){
                this.num += 1;
                // 向父组件抛出一个自定义事件
                this.$emit('aaa')
            }
        }
    });
    let app = new Vue({
        el: '#app',
        data: {
            totalNum: 0
        },
        methods: {
            addTotal(){
                this.totalNum += 1
            }
        }
    })
</script>

</body>
</html>

　　

组件之间的互相传值

　　1.借助一个空Vue对象

　　 　　let bus = new Vue()

　　2.组件1中：通过bus.$emit(事件,值)向外传递数据

　　3.组件2中：mounted(){bus.$on(事件,(值)=>{...})}

// 借助一个空的Vue对象实现组件间通信
let bus = new Vue();   // 大项目用这个VueX
//传值的那个组件
let B = {
        template: `
            <div>
                <h1>这是 子组件： my-mjj </h1>
                <button v-on:click="add">选我</button>
            </div>
        `,
        data(){
            return {
                num: 0
            }
        },
        methods: {
            add(){
                this.num += 1;
                // 利用bus对象抛出一个自定义事件
                bus.$emit('xuanwo', this.num);
            }
        }
    };

//接收的那个组件

let A = {
        template: `
            <div>
                <h1>这是 子组件： my-alex </h1>
                <p>my-mjj被选中的次数：{{ num }}</p>
            </div>
        `,
        data() {
            return {
                num: 0
            }
        },
        mounted(){
            // 在文档准备就绪之后就要开始监听bus是否触发了 xuanwo 的事件
            bus.$on('xuanwo', (val)=> {
                // this.num += 1;  // ?
                console.log(val);
                console.log(this);  // this 是组件A
                this.num = val;
            })
        }
    };
组件之间的传值

 

父组件监听子组件原生的事件

使用.native修饰符

<body>


<div id="app">
    <!--3.使用子组件-->
    <!--此处属于父组件的作用域-->
    <!--在父组件监听子组件的原生事件-->
    <my-test
            v-on:click.native="add"
            v-bind:name="sb"
    ></my-test>

    <my-test2
        v-on:zdy="aaa"
        v-bind:name="sb"
    ></my-test2>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>

<script>
    // 1.声明子组件 （组件名首字母最好大写）
    let Test = {
        props: ['name'],
        template: `<button>hello {{ name }}</button>`
    };
    let Test2 = {
        template: `<button v-on:click="bbb">子组件2</button>`,
        methods: {
            bbb(){
                this.$emit('zdy')
            }
        }
    };

    const app = new Vue({
        el: '#app',
        data: {
            sb: 'Alex',
        },
        methods: {
          add(){
              alert('hello s16');
          },
            aaa(){
              alert('周翔都不知道问题是什么！');
            }
        },
        // 2. 在Vue根实例中挂载子组件
        components: {
            'my-test': Test,
            'my-test2': Test2,
        }
    });
</script>
</body>
</html>
父组件监听子组件

 

 

 

posted @ 2019-01-09 22:05  领财  阅读(166)  评论(0)  编辑  收藏  举报