chaihongjun.me

[Vue]入门学习之十七Vue的子组件向父组件传值

<!-- 父组件 -->
<template>
    <div id="app">
        <!--
             //****** 3. 在父组件模板内以标签形式引用子组件
             //****** 4. 并同时通过v-bind传递父组件的数据给子组件
               子组件接收的属性可以自定义名称
         -->
         <!-- titleChanged 是在子组件某个事件内创建的一个新的事件的名称 
              这个事件的名称绑定的具体事件的行为则是父组件的一个事件 
              传递给父组件的值通过$event表示
              -->
        <app-header :title="title" @titleChanged="updateTitle($event)"></app-header>
        <users :users="users"></users>
        <users :users="users"></users>
        <app-footer :title="title"></app-footer>
    </div>
</template>
<script>
//****** 父组件传值给子组件步骤
////******
////******
//****** 1.在父组件内导入子组件模块
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import Users from './components/Users.vue'
export default {
    name: 'app',
    data() {
        return {
            users: [
                { name: 'chj', position: 'Web开发', show: false },
                { name: 'chaihongjun', position: 'Web开发', show: false },
                { name: 'puffbaby', position: 'Web开发', show: false },
                { name: 'chj', position: 'Web开发', show: false },
                { name: 'chaihongjun', position: 'Web开发', show: false },
                { name: 'puffbaby', position: 'Web开发', show: false },
                { name: 'chj', position: 'Web开发', show: false },
                { name: 'chaihongjun', position: 'Web开发', show: false },
                { name: 'puffbaby', position: 'Web开发', show: false }
            ],
            title: "传递的是一个值,(number string boolean)"
        }
    },
    components: {
        //****** 2.在父组件内注册子组件
        "app-header": Header,
        "app-footer": Footer,
        "users": Users
    },
    methods: {
         //参数title 指向 模板里的$event
        updateTitle: function(title) {
             this.title=title;
        }
    }
}
</script>
<style scoped>
</style>
<!-- 子组件 -->
<template>
    <header @click="changeTitle">
        <h1> {{title1}}-{{title}}</h1>
    </header>
</template>
<script>
export default {
    name: 'app-header',
    data() {
        return {
            title1: "Vuejs Demo"
        }
    },
    //****** 5. 在子组件脚本内通过props属性接受父组件传值的那个属性
    props: {
        title: {
            type: String
        }
    },
    methods:{
        changeTitle:function(){
              //  this.title="changed";
              //  子组件的事件反向改变父组件共享的数据,即子组件向父组件传值
             // this.$emit("事件名称","传递的内容")
             //创建一个自定义事件,并可以传递一个值给父组件
            this.$emit("titleChanged","子组件向父组件传值");
        }
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header {
    background-color: lightgreen;
    padding: 10px;
    text-align: center;
}
header:hover{
    cursor:pointer;
}
h1 {
    color: #222;
}
</style>

父组件向子组件传递数据是通过在子组件标签绑定复制,然后子组件的脚本内使用props属性接收数据完成的。而子组件向父组件传值,则是子组件的一个事件触发一个自定义事件,这个自定义事件名称必须在父组件内的子组件标签上绑定父组件一个事件。

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»