济南做网站哪里便宜,wordpress 终极优化,展示型网页设计公司,如何使用网站模板前言 我们接着上一篇文章 03-01-Vue组件的定义和注册 来讲。 下一篇文章 04-Vue#xff1a;ref获取页面节点–很简单 父组件向子组件传值
我们可以这样理解#xff1a;Vue实例就是一个父组件#xff0c;而我们自定义的组件#xff08;包括全局组件、私有组件#xff09;…前言 我们接着上一篇文章 03-01-Vue组件的定义和注册 来讲。 下一篇文章 04-Vueref获取页面节点–很简单 父组件向子组件传值
我们可以这样理解Vue实例就是一个父组件而我们自定义的组件包括全局组件、私有组件就是子组件。
【重点】需要注意的是子组件不能直接使用父组件中的数据。父组件可以通过props属性向子组件传值。
父组件向子组件传值的代码举例
父组件
templatediv idappMyComponent :msgmessage/MyComponent/div
/templatescript
import MyComponent from ./components/MyComponent.vue;
export default {components:{MyComponent},data(){return{message: 这是父组件中的变量}}
};
/script
子组件
templatediv这是组件中的内容, msg: {{ msg }}/div
/templatescript
export default {props: [msg]
};
/scriptstyle
/style效果如下 父组件给子组件传值的步骤 根据上方截图我们可以总结出父组件给子组件传值的步骤如下。 1在子组件的props属性中声明父亲传递过来的数据
2使用子组件的模板时绑定props中对应的属性
3父组件在引用子组件时进行属性绑定。
子组件中data中的数据和props中的数据的区别 子组件中的 data 数据并不是通过 父组件传递过来的而是子组件自身私有的比如 子组件通过 Ajax 请求回来的数据都可以放到 data 身上。props 中的数据都是通过 父组件 传递给子组件的。 data中的数据是可读可写的props中的属性只是可读的无法重新赋值重新赋值会报错也就是说子组件不要直接去修改父组件中的数据。
父组件将方法传递给子组件 父组件通过事件绑定机制将父组件的方法传递给子组件 父组件代码
templatediv idapp!-- 父组件向子组件 传递 方法是通过 事件绑定机制 v-on。当我们自定义了 一个 事件属性 parent-show这个地方不能用驼峰命名之后--!-- 那么子组件就能够通过 emit 来调用 传递进去的 这个 方法了 --!-- 【第一步】。意思是说show是父组件的方法名parent-show是自定义的时间属性稍后要在子组件中用到 --MyComponent :msgmessage parentShowshow/MyComponent/div
/templatescript
import MyComponent from ./components/MyComponent.vue;
export default {components: {MyComponent,},data() {return {message: 这是父组件中的变量,};},methods: {// 定义父组件的show方法show() {console.log(这是父组件的方法);},},
};
/script
子组件代码
template!-- 【第二步】按照正常的写法来点击按钮调用子组件的方法 --div clickhandleClick这是组件中的内容, msg: {{ msg }}/div
/templatescript
export default {props: [msg],methods: {handleClick() {// 当点击子组件的按钮时如何 拿到 父组件传递过来的 func 方法并调用这个方法// emit 英文原意 是触发调用、发射。意思是触发父组件的方法// 【第三步】 在子组件的方法中通过 emit 触发父组件的方法this.$emit(parentShow);},},
};
/scriptstyle
/style效果如下点击子组件触发了父组件的方法 根据上面的代码我们可以总结出父组件将方法传递给子组件分为三步具体可以看上方代码的注释。
子组件向父组件传值
上面的一段中我们再看一遍父组件将方法传递给子组件的这段代码一定要再看一遍因为我们是要在此基础之上做修改。
如果要实现子组件向父组件传值代码是类似的我们只需要在子组件通过emit触发父组件的方法时把子组件的参数带出去就可以了。代码如下。
父组件代码
templatediv idappMyComponent :msgmessage parentShowshow/MyComponent/div
/templatescript
import MyComponent from ./components/MyComponent.vue;
export default {components: {MyComponent,},data() {return {message: 这是父组件中的变量,};},methods: {// 定义父组件的show方法show(data1, data2) { //【第二步】父组件里放两个参数这个两个参数就代表着子组件中的childData1、childData2console.log(这是父组件的方法);console.log(子组件传值,data1, data2);},},
};
/script
子组件代码
templatediv clickhandleClick这是组件中的内容, msg: {{ msg }}/div
/templatescript
export default {props: [msg],methods: {handleClick() {// 子组件如果要给父组件传递参数在触发 emit 的时候通过参数的形式带出去就可以了// 【第一步】在子组件里我们带两个参数出去传给父组件this.$emit(parentShow, childData1, childData2);},},
};
/scriptstyle
/style运行结果点击之后 代码举例2将子组件中的data数据传递给父组件存放到父组件的data中 在上方代码的基础之上做改进。 父组件代码
templatediv idappMyComponent :msgmessage parentShowshow/MyComponent/div
/templatescript
import MyComponent from ./components/MyComponent.vue;
export default {components: {MyComponent,},data() {return {message: 这是父组件中的变量,parentData: null,};},methods: {// 定义父组件的show方法show(arg) {//【第二步】父组件里放参数这个参数就代表着子组件中的 child.dataconsole.log(父组件提供的方法);this.parentData arg; //将参数arg传递给父组件的data也就达到了目的子组件传递数据赋值给父组件console.log(打印父组件的数据这是子组件传过来的 JSON.stringify(this.parentData));},},
};
/script
子组件代码
templatediv clickhandleClick这是组件中的内容, msg: {{ msg }}/div
/templatescript
export default {props: [msg],data(){return{childData: { //定义自组件的数据name: HydeLinjr,age: 26}}},methods: {handleClick() {// 子组件如果要给父组件传递参数在触发 emit 的时候通过参数的形式带出去就可以了// 【第一步】在子组件里我们带两个参数出去传给父组件this.$emit(parentShow, this.childData);},},
};
/scriptstyle
/style运行结果点击之后
