Vue组件

时间：2020-11-09 21:37:11 阅读：35 评论：0 收藏：0 [点我收藏+]

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。

组件树

技术分享图片

局部组件

局部组件分为声子,挂子,用子

1.声子,声明一个组件
Vue 中组件的名字首字母要大写 跟标签区分,组件中的data必须是个函数,一定要有返回值

2.挂子,挂载组件components
挂载哪个组件,这个组件就是我的父组件


3.用子,用组件
<组件名/>
template中的模板一定要有一个根标签包裹
如果仅仅是实例化vue对象中既有el 又有template,如果template中定义模板的内容,那么template模板的优先级大于el,

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    //如果template也定义这个msg属性,这块不会在显示-->
    <h4>{{ msg }}</h4>
</div>
<script src="../vue.js"></script>
<script>
    // Vue 中组件的名字首字母要大写 跟标签区分,组件中的data必须是个函数,一定要有返回值
    // 1.声子,声明一个组件
    let App = {
         data(){
            return{
                text:‘天选之子‘
            }
        },
        //template定义模板中的内容
        template: `
            <div id="a">
                <h3>{{ text }}</h3>
            </div>
        `
    };
    new Vue({
        //如果仅仅是实例化vue对象中既有el 又有template,如果template中定义模板的内容,
    // 那么template模板的优先级大于el
        el:‘#app‘,
        data(){
            return{
               msg:‘wind‘
            }
        },
        template:`
        <div class="app">
<!--            <h1>{{ msg }}</h1>-->
<!--            //  3.用子,用组件-->
            <App/>
        </div>
        `,
        // 2.挂子,挂载组件components
        components:{
            //如果key和value一样,可以只写一个App,这里的value :App就是上面声明的App
            App:App
        }
    })
</script>



</body>
</html>

局部组件-示例1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    在这里调用-->
   <App></App>
</div>
<script src="../vue.js"></script>
<script>

    let App = {
         data(){
            return{
                text:‘天选之子‘
            }
        },
        template: `
            <div id="a">
                <h3>{{ text }}</h3>
            </div>
        `
    };
    new Vue({
        //如果仅仅是实例化vue对象中既有el 又有template,如果template中定义模板的内容,
    // 那么template模板的优先级大于el
        el:‘#app‘,
        data(){
            return{
            }
        },
        // 2.挂子,挂载组件components
        components:{
            App
        }
    })
</script>
</body>
</html>

局部组件-示例2(没有用子)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <App></App>
</div>

<script src="../vue.js"></script>
<script>

    let Vheader = {
        data() {
            return {}
        },
        template: `
            <div>
                <h1>随风</h1>
                <h2>浪翻云</h2>
            </div>
        `
    };

    let App = {
        data() {
            return {
                text: ‘天选之子‘
            }
        },
        template: `
            <div id="a">
                <h3>{{ text }}</h3>
                <Vheader></Vheader>
            </div>
        `,
        components: {
            Vheader
        }
    };
    new Vue({
        el: ‘#app‘,
        data() {
            return {}
        },
        // 2.挂子,挂载组件components
        components: {
            App
        }
    })
</script>
</body>
</html>

局部组件-示例3(2个组件)

Vue组件

原文：https://www.cnblogs.com/TodayWind/p/13950474.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)