Vue-根组件-局部组件-全局组件-组件间的通信

文章目录

        • 一、根组件
        • 二、局部组件
        • 三、全局组件
        • 四、组件间的通信

一、根组件

每一个组件都是一个vue实例
每个组件均具有自身的模板template,根组件的模板就是挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域,以达到组件的复用
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>根组件</title>

</head>
<body>
<div id="app">
    <h1>{{ title }}</h1>
    <p>{{ title }}</p>sdfsdaf
</div>
<div id="main"></div>
</body>
<script src="js/vue.js"></script>
<script>

    // template就是一个组件的html实体代码块
    new Vue({
        el: '#app',
        data: {
            title: '根组件'
        },
        // template模板,书写html代码块
        // 根组件也可以添加template模板,但是建议直接使用挂载点
        // 每个组件的template模板中只能解析一个(第一个)根标签
        template: `
        
        

{{ title }}

{{ title }}

{{ title }}
{{ title }}
`
}); // 只要是被new出来的vue实例都是根组件,所以一个vue单页面项目中只需要出现一次new创建的vue实例 new Vue({ el: '#main' }) </script> </html>

二、局部组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>局部组件</title>

</head>
<body>

<div id="app">
<!--<localTag></localTag>-->
    <!--资源出现在哪个模板,该资源就由该模板的拥有者提供-->
    <!--++++组件不能绑定系统事件,但可以绑定自定义事件++++-->
    <abc @mouseenter="abcEnter">{{ info }}</abc>
    <abc></abc>
</div>

<div id="main">
    <local-tag></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    // 局部组件
    // 子组件的资源有自身提供
    var localTag = {
        // 挂载点是根组件的独有特性
        // el: '.localTag',

        // 子组件必须拥有自身template
        template: `
        

我是局部组件

我是局部组件的文本解释

我被点击了 {{ num }} 下


`
, // 子组件的data为方法的返回值字典 data: function () { return { num: 0 } }, methods: { btnClick: function () { this.num++ } } }; // 如果想在页面中看见子组件,需要在根组件中使用该子组件 // 如果根组件要使用局部子组件,需要提前注册 new Vue({ el: '#app', data: { info: "message" }, components: { abc: localTag, }, methods: { abcEnter: function () { console.log('abc被悬浮了') } } }); new Vue({ el: '#main', components: { localTag } }) </script> </html>

三、全局组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全局组件</title>
</head>
<body>
    <div id="app">
        <global-tag></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 全局组件与局部组件的不同点:全局组件不用注册

    // 全局组件用Vue.component()来声明定义,两个参数
    // 第一个为组件名,第二个为组件内容
    Vue.component('globalTag', {
         template: `
        

我是全局组件

我是全局组件的文本解释

我被点击了 {{ num }} 下


`
, data: function() { return { num: 1 } }, methods: { btnClick: function () { this.num++ } } }); new Vue({ el: '#app', data: { } }) </script> </html>

四、组件间的通信

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件间的通信</title>
</head>
<body>
<div id="app">

    <tag :super_msg="msg" @own_method="receiveInfo"></tag>

    <p>{{ temp_info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>

    // 父组件数据传递给子组件,通过自定义属性绑定的方式
    // 子组件数据传递给父组件,通过自定义事件的发送
    Vue.component('tag', {
        props: ['super_msg'],

        template: `
        

{{ super_msg }}

`
, data: function () { return { info: '子级的信息' } }, methods: { sendInfo: function () { this.$emit('own_method', this.info) } } }); new Vue({ el: '#app', data: { msg: '父级的数据', temp_info: '' }, methods: { receiveInfo: function (info) { this.temp_info = info } } }) </script> </html>

你可能感兴趣的:(Vue)