vue.js 组件(三)

2024年3月7日 148次阅读 来源: 小渝人儿

全局注册

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>vue.js component</title>
</head>
<body>
<div id="example">
<my-component></my-component>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
});

Vue.component('my-component', MyComponent);
new Vue({
  el: '#example'
})
</script>
</body>
</html>

局部注册

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>vue.js component</title>
</head>
<body>
<div id="example">
    <didi-component></didi-component>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var Child = Vue.extend({
    template: '<div>I am a child !</div>',
    replace: true
});

var Parent = Vue.extend({
    template: '<p>I am parent</p><br /> <child>></child>',
    components: {
        'child': Child
    }
});

new Vue({
    el: '#example',
    components: {
        'didi-component': Parent
    }
});
</script>
</body>
</html>

数据传递

动态语法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>vue.js component</title>
</head>
<body>
<div id="example">
    <didi-component></didi-component>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var Child = Vue.extend({
    props: ['myComponent'],
    template: '<div>{{myComponent}} DDFE!</div>',
    replace: true
});

var Parent = Vue.extend({
    template: '<p>I am parent</p><br /> <child :my-component="hello"></child>',
    data: function () {
        return {
            'hello': 'hellos'
        }
    },
    components: {
        'child': Child
    }
});

new Vue({
    el: '#example',
    components: {
        'didi-component': Parent
    }
});
</script>
</body>
</html>

组件通信

$on() – 监听事件
$emit()- 把事件沿着作用域链向上派送
$dispath() – 派发事件，事件沿着父链冒泡
$ broadcast() – 广播事件，事件向下传导给所有的后代

组件通信实例一

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>vue.js component</title>
</head>
<body>
<!-- 子组件模板 -->
<template id="child-template">
    <input v-model='msg' />
    <button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父组件模板 -->
<div id="events-example">
    <p>Messages: {{messages | json}}</p>
    <child></child>
</div>
<div id="example">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.component('child', {
    template: '#child-template',
    data: function () {
        return {
            msg: 'hello'
        }
    },
    methods: {
        notify: function () {
            if (this.msg.trim()) {
                this.$dispatch('child-msg', this.msg);
                this.msg = '';
            }
        }
    }
});

var parent = new Vue({
    el: '#events-example',
    data: {
        messages: [],
    },
    events: {
        'child-msg': function (msg) {
            this.messages.push(msg);
        }
    }
});
</script>
</body>
</html>

组件通信实例二

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>vue.js component</title>
</head>
<body>
<!-- 子组件模板 -->
<template id="child-template">
    <input v-model='msg' />
    <button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父组件模板 -->
<div id="events-example">
    <p>Messages: {{messages | json}}</p>
    <child v-on:child-msg="handleIt"></child>
</div>
<div id="example">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.component('child', {
    template: '#child-template',
    data: function () {
        return {
            msg: 'hello'
        }
    },
    methods: {
        notify: function () {
            if (this.msg.trim()) {
                this.$dispatch('child-msg', this.msg);
                this.msg = '';
            }
        }
    }
});

var parent = new Vue({
    el: '#events-example',
    data: {
        messages: [],
    },
    methods: {
        'handleIt': function () {
            console.log('a');
        }
    }
});
</script>
</body>
</html>
    原文作者：小渝人儿
    原文地址: https://segmentfault.com/a/1190000007661450
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞