vue.js组件之组件之间的数据传递

在说组件之间的传递问题之前 我,们先来道开胃菜—组件的切换

第一种方式是使用v-if的方式来实现两个组件之间的来回切换

 <div id="app">
        <a href="" @click.prevent="flag=true">登陆</a>
        <a href="" @click.prevent="flag=false">注册</a>
        <login v-if='flag'></login>
        <register v-else='false'></register>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component('login', {
            template: '<h3>登陆组件</h3>'
        })
        Vue.component('register', {
            template: '<h3>注册组件</h3>'
        })
        var app = new Vue({
            el: "#app",
            data: {
                flag: 'true'
            }

        })
    </script>

优点:好用 快捷
缺点:控制的组件少 组件一多久不行了

方法二:使用vue中提供的 component

<div id="app">
        <a href="" @click.prevent="comName='login'">登陆</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <!-- vue提供了 component ,来展示对应名称的组件 -->
        <!-- component  是一个占位符 :is 属性可以用来指定要展示的组件名称 -->
        <component :is="comName"></component>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component('login', {
            template: '<h3>登陆组件</h3>'
        })
        Vue.component('register', {
            template: '<h3>注册组件</h3>'
        })
        var app = new Vue({
            el: "#app",
            data: {
                comName: 'login'   //当前 component 中的:is 绑定的组件名称
            }

        })
    </script>

组件切换的两个小案例就说完啦

组件中的数据交互

父组件向子组件传值

1.组件内部通过 props 接收传递过来的值

Vue.component(‘menu-item', {
	props: ['title'],
	template: '<div>{{ title }}</div>'
})

props属性名规则

• 在 props 中使用驼峰形式，模板中需要使用短横线的形式
• 字符串形式的模板中没有这个限制
• props是数组类型

 <div id="app">
        <!-- 父组件可以在引用子组件的时候通过属性绑定的形式 v-bind 把需要传递给子组件的数据,
        以属性绑定的形式 传递到子组件的内部 -->
        <com1 v-bind:parentmsg='msg'></com1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: '123 这是父组件中的数据'
            },
            components: {
                // 子组件中的data 数据并不是父组件传递过来的 而是私有的
                // data中的数据 可读可写  props中的数据是只读的
                data: {},
                // 子组件中默认无法访问到 父组件上的data中数据和methods中的方法
                com1: {
                    template: '<h1>这是子组件---{{parentmsg}}</h1>',
                    // 组件中的所有 props 中的数据 都是通过 父组件传递给子组件的
                    props: ['parentmsg'], //把父组件传递过来的parentmsg 先传入到props中定义一下
                }
            }
        })
    </script>

子组件向父组件传值

子组件通过自定义事件向父组件传递信息

 <div id="app">
        <!-- 父组件向子组件传递方法 事件绑定机制 v-on 当我们自定义了 一个事件属性之后,那么子组件就能够,通过某些方式,来调用了 -->
        <com2 @func="show"></com2>
    </div>
    <template id="tmpl">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="测试方法" @click='myclick'>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        var com2 = {
            template: "#tmpl",  // 通过指定了一个 id 表示说 要加载 这个指定id的 template 元素中的内容当做组件的 html 结构
            methods: {
                myclick() {
                    // 当点击子组件的时候 ,如何调用 父组件传递过来的func方法
                    //emit 代表触发,调用的意思
                    this.$emit('func')
                }
            },
        }
        var app = new Vue({
            el: "#app",
            data: {},
            components: {
                com2
            },
            methods: {
                show() {
                    console.log('调用父组件身上的 show方法')
                }
            },
        })
    </script>