父组件往子组件传值(经常使用)

时间 2020-06-19
标签组件经常使用繁體版
原文原文链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="vue.js"></script>
<script>

    //子组件2
    //第一步:生子2 挂子往App里挂, 不须要挂Vue里
 let Vheader = {//对象
 data(){ return {} }, //第一步(传值的 ): 子组件挂载父组件的属性props 挂载以后就能够在子组件内部使用父组件传过来的数据了*****
 props:["msg","post"], //template 是一个组件模板,必定要用一个根(父)元素包裹起来,因此必定要有一个div闭合****
        //第三步(传值):展现父组件传来的值
 template:` <div>
            <h2>生子是在子组件中</h2>
            <h2 style="color:red">挂子和用子是在父组件中</h2>
            <h3>{{msg}}</h3>
            <h3>{{post.title}}</h3>

        </div>
 `, }; //第一步: 声子 Vue中组件的首字母要大写, 跟标签区分
    //组件中的data必须是个函数,必定要有返回值
 let App = { //跟的是一个对象 这个对象里 就是除了下面的Vue中,el之外的全部属性
 data() { // 父-->子传值 经过props 属性
            // post传入一个对象的多个属性
            return { text: "我是Vheader的父组件,想把数据传过去", post:{ id:1, title:"My journey with Vue" } } }, //第四步: 给子组件里写内容. 当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系
        //在<h2>{{text}}</h2>中的{{text}}部分能够放头部组件,内容组件和侧边栏组件 ************
        // 第三步:用子2 <Vheader></Vheader>, 下一步去对应模板Vheader的template里写内容

        //第二步(传值的): 父组件中经过v-bind绑定自定义属性, 在Vheader定义自定义的属性 :msg 这个msg必定是跟子组件里的props:["msg"]同样***
        // 传入一个对象的多个属性用post
 template: ` <div id="a">

            <Vheader v-bind:msg="text" v-bind:post="post"></Vheader>

        </div>
 `, //给子组件定义方法 好比说a标签的超连接
 methods:{ }, components:{ // 第二步:挂子2
 Vheader }, } new Vue({ el: "#app", //绑定根元素 是上面的id="app"
 data() { return {msg: "alex"} }, components: { // 第二步: 挂子 父组件Vue里不只是能够挂载一个App,还能够挂载其余组件
 App //若是key和value同样,能够只写App 替代App:App
 } }) </script>
</body>
</html>